如何在Angular中全局使用Bootstrap SCSS变量，无需逐组件导入？

针对你不想在每个组件SCSS文件里重复导入Bootstrap变量/混合宏的需求，在Angular CLI v1.7.4里有两种实用的全局方案，不用再挨个组件加@import了：

方案1：通过angular-cli.json配置全局样式文件 #

Angular CLI允许你在配置文件里指定全局加载的SCSS文件，这些文件会被注入到所有组件的样式上下文里：

1. 打开项目根目录下的angular-cli.json文件
2. 找到apps数组里的styles属性，添加Bootstrap相关SCSS文件的路径：
   • 如果你只想用变量和混合宏（不引入全部Bootstrap样式）：

     "styles": [
       "../node_modules/bootstrap/scss/_variables.scss",
       "../node_modules/bootstrap/scss/mixins/_mixins.scss",
       "styles.scss"
     ]
     

   • 如果你想全局引入完整的Bootstrap样式+变量/混合宏：

     "styles": [
       "../node_modules/bootstrap/scss/bootstrap.scss",
       "styles.scss"
     ]
     

3. 保存配置后，重启Angular CLI的开发服务（ng serve），之后所有组件的SCSS文件里就能直接用$primary这类变量，或者@include media-breakpoint-up(md)这类混合宏了。

方案2：在根styles.scss中全局导入 #

这种方式更灵活，还能方便地覆写Bootstrap的默认变量：

1. 打开src/styles.scss文件
2. 添加导入语句（用~符号指向node_modules里的Bootstrap文件）：
   • 仅导入变量和混合宏：

     // 可选：先覆写Bootstrap默认变量
     $primary: #2c3e50;
     $success: #2ecc71;
     
     // 导入Bootstrap变量和混合宏
     @import '~bootstrap/scss/_variables.scss';
     @import '~bootstrap/scss/mixins/_mixins.scss';
     

   • 导入完整Bootstrap样式：

     // 先覆写变量，再导入完整Bootstrap
     $primary: #2c3e50;
     @import '~bootstrap/scss/bootstrap.scss';
     

3. 同样重启开发服务后，所有组件就能直接使用这些全局可用的变量和混合宏了。

注意事项 #

• 如果你之前在组件里单独导入过_variables.scss，建议删掉这些重复的导入，避免样式冲突或编译冗余。
• Angular CLI v1.7.4完全支持~路径别名，不用写完整的相对路径到node_modules。

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