0.1.4 • Published 3 years ago

storybook-preset-scss v0.1.4

Weekly downloads
-
License
MIT
Repository
gitlab
Last release
3 years ago

storybook SCSS 配置

用于配置 scss,并修改默认 css 配置,仅兼容 webpack@4

安装

yarn add -D storybook-preset-scss

增加以下配置到 .storybook/main.js:

module.exports = {
  addons: ['storybook-preset-scss'],
};

API

你可以通过传递 options 来配置 storybook-preset-scss,配置如下:

  1. cssRules 用于传递给修改后的 css loader,例如传递 exclude 等
  2. scssRules 用于传递给修改后的 scss loader,使用同上
  3. cssLoaderOptions 用于传递给 'css-loader' 配置
  4. sassLoaderOptions 用于传递给 'sass-loader' 配置
  5. threadLoaderOptions 用于传递给 'thread-loader' 配置
  6. cacheLoaderOptions 用于传递给 'cache-loader' 配置

默认不需要任何配置即可正常使用

module.exports = {
  addons: [
    {
      name: 'storybook-preset-scss',
      options: {
        cssRules: {},
        scssRules: {},
        cssLoaderOptions: {
           <!-- modules: true, -->
           <!-- localIdentName: '[name]__[local]--[hash:base64:5]', -->
        }
      }
    },
    // 你可以添加其他 addOn 或 preset
    '@storybook/preset-typescript',
    '@storybook/addon-actions',
  ]
}