Angular 14升级至18后SCSS mixin未定义错误排查与解决

核心原因 #

1. 导入顺序错误：你在angular.scss中先导入了自定义的default/styles，但该文件（及其依赖的_app-content.scss）已经用到了Bootstrap的media-breakpoint-down混入，而Bootstrap的mixins是在之后才导入的，导致编译时无法找到该混入。
2. Sass路径前缀失效：Angular 16+ 开始，sass-loader不再支持~前缀解析node_modules中的文件，你写的~bootstrap/scss/...路径会被当作相对路径处理，无法正确加载Bootstrap的SCSS文件。
3. 重复导入引发冲突：你重复导入了Bootstrap的functions、variables和mixins文件，可能导致变量或混入被意外覆盖，无法正常识别。

解决步骤 #

1. 调整导入顺序并修正路径前缀 #

修改angular.scss，先导入Bootstrap核心依赖，再导入自定义样式，同时移除~前缀：

// 按顺序导入Bootstrap核心依赖（functions → variables → mixins）
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
// 导入完整Bootstrap样式（若仅需mixins可省略此步）
@import 'bootstrap/scss/bootstrap';

// 后导入自定义样式及第三方组件样式
@import 'default/styles';
@import '@ctrl/ngx-emoji-mart/picker';

注：bootstrap/scss/bootstrap已包含核心依赖，若导入完整Bootstrap，可省略前面单独的核心依赖导入。

2. 清理重复导入语句 #

删除angular.scss中重复的Bootstrap导入，避免冲突：

// 移除以下重复导入
// @import 'bootstrap/scss/_functions';
// @import 'bootstrap/scss/_variables';
// @import 'bootstrap/scss/mixins/_breakpoints';

3. 验证Bootstrap版本兼容性 #

Bootstrap 5.2与Angular 18兼容，若问题仍存在，可尝试升级到最新5.x版本：

npm install bootstrap@latest --save

4. 确认Angular构建配置 #

检查angular.json的styles配置，确保src/scss/angular.scss被设为全局样式文件：

"architect": {
  "build": {
    "options": {
      "styles": [
        "src/scss/angular.scss"
      ]
    }
  }
}

5. 重新构建项目 #

执行以下命令清理缓存并重新安装依赖：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install
ng build

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