如何在 Angular 中全局拥有 Bootstrap 的 scss 变量，而无需在每个组件中每次都导入主题？

【问题标题】：How to have Bootstrap's scss variables globally in Angular without importing theme every time in each component?如何在 Angular 中全局拥有 Bootstrap 的 scss 变量，而无需在每个组件中每次都导入主题？
【发布时间】：2018-10-03 00:56:22
【问题描述】：

我知道有一种方法可以通过在每个组件的 scss 文件中导入 _variables 文件来以角度使用引导程序的 scss 变量，然后开始使用该变量，这种方法回答了很多问题。

但我认为这种方式不是一个好方法。是否有另一种方法可以导入变量文件或整个 bootstrap.scss 文件以使用 mixins 和变量，而无需每次在每个组件样式文件中导入必需品？

我正在使用 angular-cli v1.7.4

【问题讨论】：

一种方法是在 index.html 文件中引用它。它将适用于您的应用程序的每一页。
另外如果你使用Angular Cli生成项目，你可以找到style.css / style.scss。在那里你可以添加你的 scss 变量
@RukshanDangalla 这不行，我以前试过。

标签： angular twitter-bootstrap sass angular-cli

【解决方案1】：

这是不可能的。每个组件样式都是单独编译的。

https://github.com/angular/angular-cli/issues/3700

你可以做的是在.angular-cli.json文件中指定stylePreprocessorOptions，这样你就可以导入变量了

@import 'variables';

而不是类似的东西

@import '../styles/_variables.scss';

只是更方便了，不过还是要在每个组件的scss文件中包含它

【讨论】：

同样不要使用以下名称：_colors.scss、_base.scss、_globals.scss，因为loader会尝试加载js，而不是scss。