Angular15迁移报错：Module parse failed 意外字符'@'

我刚接触Webpack，知道这个问题已经有不少讨论，但我的情况有点特殊——没有使用自定义Webpack配置。在从Angular14迁移到Angular15的过程中，我卸载了node-sass，换成了sass。

angular.json中architect/build配置： #

"builder": "@angular-devkit/build-angular:browser",
"options": {
    "outputPath": "dist",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "inlineStyleLanguage": "scss",
    "assets": ["src/assets"],
    "styles": [
        "src/styles/app/global.scss",
        "./node_modules/primeng/resources/primeng.min.css",
        "./node_modules/primeng/resources/themes/nova-alt/theme.css",
        "./node_modules/primeicons/primeicons.css",
        "src/styles/vendors/font-awesome.css",
        "./node_modules/quill/dist/quill.core.css",
        "./node_modules//quill/dist/quill.snow.css",
        "./node_modules/quill-mention/dist/quill.mention.min.css"
    ],
    "scripts": [
        "./node_modules/quill/dist/quill.js",
        "node_modules/quill-mention/dist/quill.mention.min.js"
    ]
}

运行ng serve时的错误： #

./src/styles/app/global.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected character '@' (1:0) 
File was processed with these loaders:
 * ./node_modules/resolve-url-loader/index.js
 * ./node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> @charset "UTF-8";
| @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); /*!
|  * Bootstrap v3.4.0 (https://getbootstrap.com/)

global.scss代码： #

@use '../vendors/bootstrap';
@use 'custom-primeng-style';
@use 'custom-quill-style';
@use 'colors';
@use 'fonts';

解决方法： #

• 调整Bootstrap导入方式：Bootstrap 3.4.0是纯CSS文件，不支持SCSS的@use语法，把@use '../vendors/bootstrap';改为@import '../vendors/bootstrap';。
• 清理依赖缓存：删除node_modules文件夹和package-lock.json，重新执行npm install。
• 对齐Angular CLI依赖版本：确保@angular-devkit/build-angular与Angular15版本匹配，执行npm install @angular-devkit/build-angular@15 --save-dev。
• 修复路径错误：angular.json中./node_modules//quill/dist/quill.snow.css多了一个斜杠，改为./node_modules/quill/dist/quill.snow.css。
• 兼容加载器版本：卸载并重装适配的加载器版本：

  npm uninstall resolve-url-loader sass-loader
  npm install resolve-url-loader@5 sass-loader@13 --save-dev
  

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