Angular 11升17后SCSS加载器报错，求无需css-loader的解决方法

原因分析 #

• Angular 11到17的跨版本升级中，底层webpack版本从旧版迭代到webpack 5+，loader执行逻辑和输出要求发生了根本性变化。
• Angular 11时期，CLI内部webpack配置会隐式处理sass-loader输出的CSS内容，无需显式配置css-loader；但升级到17后，CLI配置更贴近原生webpack规范，resolve-url-loader与sass-loader的编译输出（纯CSS文本）不再被自动接管，因此触发“需要额外加载器”的报错。
• 同步升级的resolve-url-loader、sass-loader新版本，输出格式与旧版本差异较大，不再兼容Angular 11时期的隐式处理逻辑。

无需添加css-loader的解决方案 #

方案1：关闭sass-loader的sourceMap #

在angular.json的项目build配置中，修改sassOptions关闭sourceMap。resolve-url-loader依赖sourceMap处理路径时，新版本会输出webpack无法直接识别的格式，关闭后sass-loader直接输出纯CSS，Angular CLI内部逻辑可直接处理：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "options": {
            "styles": ["src/styles.scss"],
            "sassOptions": {
              "sourceMap": false
            }
          }
        }
      }
    }
  }
}

方案2：降级resolve-url-loader到兼容版本 #

锁定resolve-url-loader到^5.0.0版本（需自行测试兼容性），新版本的resolve-url-loader改变了输出逻辑，降级后可匹配Angular CLI的内部处理规则：

npm install resolve-url-loader@^5.0.0 --save-dev

方案3：自定义webpack配置复用Angular内置loader #

如果使用了@angular-builders/custom-webpack，在自定义配置中使用Angular CLI内置的style-loader替代css-loader，无需额外安装：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'resolve-url-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  }
};

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