如何在Angular项目中正确导入Bootstrap SCSS以避免样式重复？

核心配置步骤 #

1. 打开项目根目录下的angular.json配置文件，定位到对应项目的architect > build > options节点，新增如下配置：

{
  "options": {
    // 原有其他配置保持不变
    "stylePreprocessorOptions": {
      "includePaths": [
        // 配置SCSS导入的根路径，这里填入你存放自定义variables.scss的目录，以及Bootstrap的SCSS目录
        "src/styles",
        "node_modules/bootstrap/scss"
      ],
      // Angular 14及以上版本使用additionalData，14以下版本替换为prependData
      "additionalData": `
        @import "variables"; // 你自定义的变量文件，因为配置了includePaths，直接写文件名即可
        @import "bootstrap/scss/functions";
        @import "bootstrap/scss/variables";
        @import "bootstrap/scss/mixins";
      `
    }
  }
}

2. 配置完成后重启ng serve服务，所有组件的SCSS文件中可以直接使用Bootstrap的变量、mixin以及你自定义的SCSS变量，无需再手动编写导入语句。

注意事项 #

• additionalData/prependData中仅可放置变量、mixin、函数这类编译后不会生成实际CSS代码的内容，禁止写入实际业务样式，否则会在每个组件的样式中重复生成对应代码，造成样式冗余。
• 如果项目中存在architect > test的单元测试配置，需要将同一份stylePreprocessorOptions配置同步到test > options节点下，避免单元测试运行时报SCSS变量未找到的错误。
• 该配置在编译阶段完成注入，不会产生运行时性能损耗，同时可以完全解决你当前项目中反复手动导入variables.scss的冗余问题。

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