React+Storybook组件库SCSS文件未编译为CSS问题求助

问题原因 #

你遇到的SCSS语法未编译问题，核心原因是Storybook自带的默认CSS处理规则优先级高于你新增的SCSS规则，自带规则直接把SCSS文件当成普通CSS处理，没有触发sass-loader编译，同时你之前手动写的webpack配置存在语法错误（include行缺少闭合右括号）也会导致配置不生效。

解决方案 #

方案1：适用于Storybook 6.x版本

先过滤掉Storybook默认的SCSS处理规则，再添加自定义规则，修改.storybook/main.js配置如下：

const path = require('path');

module.exports = {
  // 保留你原有的其他配置项
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  webpackFinal: async (config) => {
    // 移除默认规则对scss文件的匹配
    config.module.rules = config.module.rules.map(rule => {
      if (/s[ac]ss/.test(rule.test.toString())) {
        return {...rule, exclude: /\.s[ac]ss$/}
      }
      return rule
    })
    // 新增自定义SCSS编译规则
    config.module.rules.push({
      test: /\.s[ac]ss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, "../src")
    })
    return config
  }
}

方案2：适用于Storybook 7.x/8.x版本

@storybook/preset-scss已在7.x版本废弃，改用官方推荐的样式处理插件即可：

1. 安装依赖：

npm uninstall @storybook/preset-scss
npm install @storybook/addon-styling-webpack sass --save-dev

2. 修改.storybook/main.js的addons配置：

const path = require('path');

module.exports = {
  // 原有其他配置
  addons: [
    // 保留原有其他addon
    {
      name: '@storybook/addon-styling-webpack',
      options: {
        rules: [
          {
            test: /\.s[ac]ss$/,
            use: ["style-loader", "css-loader", "sass-loader"],
            include: path.resolve(__dirname, "../src")
          }
        ]
      }
    }
  ]
}

额外排查项 #

• 确认你没有安装已废弃的node-sass，若安装先卸载，替换为官方推荐的sass包
• 修改配置后完全关闭Storybook服务，删除node_modules/.cache目录后重新启动，避免缓存影响
• 检查所有SCSS文件语法是否正确，不存在未闭合的代码块

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