React Storybook构建报错：模块解析失败，需配置对应Loader处理@语法

• 问题根源：@use是Dart Sass专属语法特性，仅靠css-loader无法编译SCSS文件，需要配套的Sass编译工具。

步骤1：安装必要依赖 #

先安装Dart Sass（sass包，替代已废弃的node-sass）和sass-loader：

yarn add -D sass sass-loader

步骤2：配置Storybook的Webpack规则 #

在.storybook/main.js中添加SCSS文件的loader处理规则：

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.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        // 若使用CSS Modules，添加modules配置项
        {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[name]__[local]--[hash:base64:5]',
            },
          },
        },
        'sass-loader'
      ],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
};

步骤3：重启Storybook服务 #

修改配置后必须停止当前运行的Storybook，重新执行启动命令：

yarn run storybook

额外检查项 #

• 排查是否存在其他Webpack loader规则覆盖了SCSS的处理逻辑
• 确认Variable.module.scss的文件路径无拼写错误

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