故事书：组件级样式因 sass-loader 12 而失败答案

【问题标题】：Storybook: component level styles failing with sass-loader 12故事书：组件级样式因 sass-loader 12 而失败
【发布时间】：2022-12-17 08:08:38
【问题描述】：

我的项目中有 Storybook 设置。以下是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-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: '@storybook/react',

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

    config.module.rules.push({
      test: /.(scss|sass)$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: [path.resolve(__dirname, '../src/styles/_variables.scss')],
          },
        },
      ],
    });

    return config;
  },
};

最初的类scss模块已添加到组件内的元素中，但在迁移到不同脚本的较新版本后（包括从 10 到 12 的 sass-loader），不再添加这些类。添加这些文件是因为如果将其添加到模块中，这将起作用：

div {
   border-color: red;
}

正如您在图像中看到的，所有内容都具有空的 class 属性，并且未添加样式。

我在不同的帖子中尝试了很多选项，但没有一个有效。有谁知道会发生什么？

【问题讨论】：

标签： reactjs sass storybook

【解决方案1】：

哦，我终于成功了。我必须添加规则：

{
   loader: 'css-loader',
   options: {
        modules: true, // Enable modules to help you using className
   }
},

【讨论】：