Storybook搭配sass-loader 12时组件级样式失效问题

问题出在Storybook默认已包含SCSS处理规则，直接追加新规则会导致同一个SCSS文件被多组loader重复处理，最终sass-loader尝试解析经过style-loader转换后的JS代码，触发语法错误。

解决步骤： #

1. 先清除webpack配置中默认的SCSS处理规则
2. 分别添加针对.module.scss和普通.scss的独立规则，用include/exclude替代复杂正则，更直观且不易出错

完整main.js配置： #

const path = require('path');
const { webpack } = require('../craco.config');

module.exports = {
  stories: ['../src/components/**/*.stories.@(js|jsx|ts|tsx)', '../src/components/**/*.stories.mdx'],
  addons: ['@storybook/addon-essentials'],
  framework: '@storybook/react',

  webpackFinal: async config => {
    config.resolve.alias = {
      ...config.resolve.alias,
      ...webpack.alias
    };

    // 清除默认的SCSS处理规则
    config.module.rules = config.module.rules.filter(rule => {
      if (rule.test instanceof RegExp) {
        return !rule.test.test('.scss');
      }
      return true;
    });

    // 添加SCSS模块规则
    config.module.rules.push({
      test: /\.scss$/,
      include: /\.module\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          }
        },
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: [path.resolve(__dirname, '../src/styles/_variables.scss')]
          }
        }
      ]
    });

    // 添加普通SCSS规则
    config.module.rules.push({
      test: /\.scss$/,
      exclude: /\.module\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: [path.resolve(__dirname, '../src/styles/_variables.scss')]
          }
        }
      ]
    });

    return config;
  },

  core: {
    builder: 'webpack5'
  }
};

关键说明： #

• 用filter移除默认SCSS规则，避免重复处理
• 用include匹配.module.scss文件并开启模块化；用exclude排除模块文件处理普通SCSS
• loader顺序必须遵循：style-loader → css-loader → sass-loader → sass-resources-loader，确保全局资源先注入再编译

内容的提问来源于stack exchange，提问作者nicokiva