从Angular 11/AngularJS混合升级到Angular 14的Webpack配置问题

问题根源 #

Angular 12切换到Webpack 5后，官方默认的SCSS loader规则结构发生了变化，不再直接暴露exclude数组；手动添加exclude会导致AngularJS相关SCSS文件脱离原有loader处理链，这类文件里的@（比如@import或变量引用）没有对应loader解析，从而触发报错。

具体解决方法 #

1. 避免修改默认规则的exclude，用include精准匹配范围 #

不要全局修改默认SCSS规则的exclude，而是给默认规则添加include，限定它只处理Angular项目自身的SCSS文件，AngularJS的SCSS单独配置loader规则处理：

// extend-webpack.config.js
const path = require('path');

module.exports = (config) => {
  // 定位到默认的SCSS处理规则
  const scssRule = config.module.rules.find(rule => 
    rule.test.toString() === '/\\.scss$/' && rule.use?.some(use => use.loader?.includes('sass-loader'))
  );

  if (scssRule) {
    // 配置默认loader仅处理Angular项目内的SCSS（根据实际项目路径调整）
    scssRule.include = [
      path.resolve(__dirname, 'src/app'),
      path.resolve(__dirname, 'src/styles')
    ];
    // 删除可能存在的旧exclude配置
    delete scssRule.exclude;
  }

  // 添加针对AngularJS SCSS的单独处理规则
  config.module.rules.push({
    test: /\.scss$/,
    include: [path.resolve(__dirname, 'src/angularjs')], // 替换为你的AngularJS SCSS所在路径
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          sassOptions: {
            // 配置sass路径查找范围，解决@import中@字符的路径解析问题
            includePaths: [path.resolve(__dirname, 'src/angularjs/styles')],
          },
        },
      },
    ],
  });

  return config;
};

2. 检查sass-loader版本兼容性 #

Angular 14对sass-loader版本有特定要求，确保package.json中sass-loader为适配Webpack 5的版本（如^12.x.x），同时sass（dart-sass）的版本也要匹配，版本不兼容会直接导致解析错误。

3. 验证Webpack规则的匹配顺序 #

Webpack按规则定义的顺序匹配文件，可通过npx webpack --config extend-webpack.config.js --display-modules查看模块匹配情况，确认AngularJS的SCSS文件被正确命中到你配置的loader。

4. 针对性处理@字符解析 #

如果报错源于@import或变量引用，调整sassOptions.includePaths添加对应目录即可；若是AngularJS特有的@语法需求，可能需要额外添加适配的loader或插件，但多数场景下都是路径解析问题，调整includePaths就能解决。

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