错误：将 Angular 14 升级到 Angular 18 时，SCSS 中未定义 mixin

Question

我正在将我的项目从 Angular 14 升级到 Angular 18，并且在运行构建时遇到与未定义的 SCSS mixin 相关的错误。我收到的错误消息是：

./src/scss/angular.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
Undefined mixin.
   ╷
9  │ ┌         @include media-breakpoint-down(md) {
10 │ │             margin: (-$app-content-padding-y-sm) (-$app-content-padding-x-sm);
11 │ │             padding: $app-content-padding-y-sm $app-content-padding-x-sm;
12 │ └         }
   ╵
  src/scss/default/app/_app-content.scss 9:3  @import
  src/scss/default/_app.scss 1:9              @import
  src/scss/default/styles.scss 12:9           @import
  src/scss/angular.scss 1:9                   root stylesheet

我尝试过的：

1。升级过程： 从 Angular 14 升级到 Angular 18 后开始出现此问题。

2。确保正确导入 Bootstrap： 这是我的 angular.scss 文件：

@import 'default/styles';
@import '@ctrl/ngx-emoji-mart/picker';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/bootstrap';
@import 'bootstrap/scss/_functions';
@import 'bootstrap/scss/_variables';
@import 'bootstrap/scss/mixins/_breakpoints';

3.检查版本： 我的 package.json 包含以下依赖项：

"dependencies": {
  "@angular/animations": "^18.2.0",
  "@angular/cdk": "^18.2.0",
  "@angular/common": "^18.2.0",
  "@angular/compiler": "^18.2.0",
  "@angular/core": "^18.2.0",
  "@angular/forms": "^18.2.0",
  "@angular/localize": "^18.2.0",
  "@angular/material": "^18.2.0",
  "@angular/platform-browser": "^18.2.0",
  "@angular/platform-browser-dynamic": "^18.2.0",
  "@angular/router": "^18.2.0",
  "bootstrap": "^5.2.0",
  ...
},
"devDependencies": {
  "@angular-devkit/build-angular": "^18.2.2",
  "@angular/cli": "^18.2.2",
  "css-loader": "^7.1.2",
  "mini-css-extract-plugin": "^2.9.1",
  "sass-loader": "^16.0.1",
  "typescript": "^5.5.2"
}

4。确保正确导入 SCSS mixins： 尽管导入了 Bootstrap 的 mixins，但仍无法识别 mixins，例如 media-breakpoint-down。

5。尝试修复：

• 删除了node_modules和package-lock.json。
• 使用 npm cache clean --force 清除了 NPM 缓存。
• 使用 npm install 重新安装依赖项。
• 尝试了不同版本的 sass-loader 和 mini-css-extract-plugin。

这些步骤都没有解决问题。

附加信息：

• Angular CLI 版本：18.2.2
• 节点版本：20.17.0
• NPM版本：10.8.2

问题：

在我的 Angular 18 项目中，什么可能导致 SCSS mixins（例如 media-breakpoint-down(md)）出现未定义的 mixin 错误？从 Angular 14 升级后如何解决此问题？

Answer 1

您必须在使用 mixin 的每个文件上添加导入。

_app-content.scss

// other bootstrap imports
@import 'bootstrap/scss/mixins/_breakpoints';
...

...
@include media-breakpoint-down(md) {
    margin: (-$app-content-padding-y-sm) (-$app-content-padding-x-sm);
    padding: $app-content-padding-y-sm $app-content-padding-x-sm;
}