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',
  ]
}