Angular项目未重复引入Bootstrap却出现SCSS编译错误是什么原因？

报错根因 #

• 变量覆盖冲突：你自定义的$gray变量和Bootstrap原生定义不兼容。Bootstrap原生的$gray是存储多梯度灰度值的Sass Map，包括$input-padding-y在内的大量布局变量计算都依赖该Map的取值。你直接将$gray覆盖为单值颜色，导致后续变量计算时类型不匹配，触发运算错误。
• Sass版本不兼容：如果你使用的是Bootstrap 5.2及以上版本，要求项目安装的Dart Sass版本≥1.33.0，旧版本Sass不支持Bootstrap使用的新式运算语法，也会触发这类运算报错。
• 第三方组件隐式引入：如果项目安装了ng-bootstrap、ngx-bootstrap这类Angular Bootstrap组件库，部分配置下会隐式引入Bootstrap的Sass文件，和你手动引入的Bootstrap产生变量作用域冲突。

解决方法 #

1. 修改变量命名，不要直接覆盖Bootstrap原生的$gray变量，自定义灰度可改为其他名称，例如$custom-gray: rgba(0,0,0,.1)。如果确实需要修改Bootstrap的灰度体系，要按照Bootstrap原生格式覆盖整个灰度Map：

$grays: (
  "100": #f8f9fa,
  "200": #e9ecef,
  "300": #dee2e6,
  // 按需修改对应色阶值即可
);

2. 卸载已废弃的node-sass，安装最新稳定版的Dart Sass：
   npm uninstall node-sass && npm install sass@latest --save-dev
3. 检查第三方Bootstrap组件库的配置，关闭其自动引入Bootstrap样式的开关，避免重复导入冲突。
4. 若上述操作无效，可在你的styles\bootstrap.scss文件最顶部提前引入Sass的math运算模块：

@use "sass:math";
// 后续再接你的自定义变量和Bootstrap导入语句

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