升级sass-loader和Webpack遇@import循环问题，如何排除指定组件？

核心思路是利用sass-loader的additionalData支持函数形式的特性，根据当前处理文件的路径判断是否注入全局导入语句，避免给src/store目录下的文件添加重复导入。

修改后的 Webpack 配置如下：

// 确保已引入path模块
const path = require('path');

module.exports = {
  // ...其他Webpack配置
  module: {
    rules: [
      // ...其他loader规则
      {
        test: /\.s[ac]ss$/i,
        use: [
          // ...其他loader（style-loader、css-loader等）
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              // 改用函数形式控制全局导入的生效范围
              additionalData: (content, loaderContext) => {
                // 获取当前处理文件的绝对路径
                const filePath = loaderContext.resourcePath;
                // 判断文件是否位于src/store目录下
                const targetDir = path.resolve(__dirname, './src/store');
                const isStoreFile = filePath.startsWith(targetDir);

                // 非store目录的文件才注入全局导入
                if (!isStoreFile) {
                  return '@import "sass/_themes.scss";@import "sass/_variables.scss"; ' + content;
                }
                // store目录的文件直接返回原内容，不添加全局导入
                return content;
              },
              sassOptions: {
                includePaths: [path.resolve(__dirname, './src')],
                // 原配置里的exclude无效，已移除（sassOptions无此配置项）
              },
            },
          },
        ],
      },
    ],
  },
};

关键说明： #

• additionalData函数通过loaderContext.resourcePath获取当前文件的绝对路径，精准判断文件所属目录
• 用startsWith替代includes，避免路径中包含类似名称的目录导致误判
• src/store下的组件可以正常单独import {Theme} from 'sass/_themes.scss'，不会再触发循环导入错误

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