你的问题核心在于Next.js自带了SCSS的默认处理规则，而你直接追加自定义规则的方式和默认规则产生了冲突——Storybook没有内置这套规则，所以你的配置能正常运行，但Next.js里不行。

为什么你的现有配置不生效？ #

Next.js的webpack配置中已经包含了处理.scss/.sass文件的完整规则链（包括css-loader、sass-loader等）。当你直接把自己的规则加到rules数组里时，默认规则会先被匹配，你自定义的sass-loader配置根本不会被执行，自然无法自动引入变量文件。

推荐解决方案：用Next.js官方的sassOptions配置 #

Next.js提供了专门的sassOptions配置项，无需修改webpack规则，直接在next.config.js中配置即可：

const path = require('path');

module.exports = {
  sassOptions: {
    // 自动在所有SCSS文件开头引入变量
    additionalData: '@import "src/styles/variables.scss";',
    // 可选：添加样式文件的查找路径，方便用相对路径引入
    includePaths: [path.join(__dirname, 'src/styles')],
  },
};

备选方案：修改现有webpack规则（适合复杂场景） #

如果你需要更定制化的webpack配置，可以找到Next.js内置的SCSS规则并修改它：

const path = require('path');

module.exports = {
  webpack: (config) => {
    // 定位到Next.js处理SCSS的规则组
    const scssRuleGroup = config.module.rules.find(
      (rule) => typeof rule.test === 'object' && rule.test.test('.scss')
    );

    if (scssRuleGroup?.oneOf) {
      // 遍历所有SCSS子规则，找到sass-loader并修改选项
      scssRuleGroup.oneOf.forEach((rule) => {
        rule.use?.forEach((loader) => {
          if (loader.loader?.includes('sass-loader')) {
            loader.options = {
              ...loader.options,
              // 注入变量文件，注意sass-loader版本：v11+用additionalData，v10及以下用prependData
              additionalData: '@import "src/styles/variables.scss";',
            };
          }
        });
      });
    }

    return config;
  },
};

注意事项 #

• 路径正确性：确保variables.scss的路径和项目结构匹配，如果你的Next.js配置了baseUrl: "src"，可以简化为@import "styles/variables.scss";
• sass-loader版本：如果你的项目使用的是v10及以下的sass-loader，需要把additionalData换成prependData
• 不要重复添加loader：Next.js已经内置了style-loader和css-loader相关的处理，手动添加会导致重复解析，引发样式错误

内容的提问来源于stack exchange，提问作者Max G.