在典型的 Angular 项目中，您将拥有许多组件。每个组件都有自己的样式表（css、scss、less 等）。您经常需要在组件中包含全局样式文件（尤其是变量文件）。
我们在另一篇 Angular 样式文章中对此进行了一些讨论：在 Angular CLI 中使用 Sass
让我们探索另一个导入样式文件的选项：
Sass 变量示例
假设_variables.scss您的src/stylings文件夹中有一个：
// your folder structure
- src
- app
- app.component.ts
- hello
- hello.component.html
- hello.component.scss
- hello.component.ts
- ...
- stylings
- _variables.scss
// your _variables.scss file
$brand-color: #800000;
对变量文件的引用
下面是我们的hello.component.html文件，让我们用我们的brand-color.
<!-- hello.component.html -->
<h1>
Hello World!
</h1>
该$brand-color变量在stylings/_variables.scss文件中。我们需要导入文件才能使用它：
// hello.component.scss
@import "../../../stylings/variables"; // this is not cool!
h1 {
color: $brand-color;
}
看到../../../stylings/语法了吗？你喜欢它吗？
想象一下，您需要../../../stylings/在另外数十或数百个组件中重复此操作，并且您需要记住相对路径。这不酷。让我们解决这个问题！
Angular CLI 配置的快捷方式
如果您的项目是使用 Angular CLI 生成的，您可以stylePreprocessorOptions > includePaths在.angular.cli.json文件中添加配置。此配置允许您添加将检查导入的额外基本路径。它告诉 Angular CLI 在处理每个组件样式文件之前在提到的路径中查找样式文件。
例如，在我们的例子中，让我们添加./stylings路径。由于配置接受一个数组，您可以添加多个路径。
{
...
"apps": [{
"root": "src",
...
"stylePreprocessorOptions": {
"includePaths": [
"./stylings"
]
}
}]
}
有了这个，我们可以hello.component.scss将我们的更新为 just @import "variables"。甜的！
// hello.component.scss
@import "variables"; // change to just variables, say goodbye to ../../../stylings/
h1 {
color: $brand-color;
}
如果路径中有重复的文件名怎么办？
想象一下，你在 中包含了两个样式路径.angular.cli.json，它们都有_variables.scss文件。猜猜会发生什么？CLI 会选择这两个文件还是抛出错误？
一起来测试一下吧！
// your folder structure
- src
- ...
- stylings
- _variables.scss
- stylings2 // add this
- _variables.scss
在 中stylings2/_variables.scss，您有以下样式，
// stylings2/_variables.scss
$brand-color: blue;
$font-size-large: 40px;
更新您的.angular.cli.json配置，以包含styling2文件夹路径。
{
...
"apps": [{
"root": "src",
...
"stylePreprocessorOptions": {
"includePaths": [
"./stylings",
"./stylings2"
]
}
}]
}
更新您的hello.component.scss文件，
// hello.component.scss
@import "variables";
h1 {
color: $brand-color;
font-size: $font-size-large;
}
重启你的开发服务器。稍等片刻，您应该会期待…… 错误！
告诉我为什么！
结果是，如果有多个同名文件，Angular CLI 将只选择第一个匹配名称的文件。在这种情况下，它将选择stylings/_variables.scss文件。这就是它无法获取变量的$font-size-large原因，因为它在styling2/_variables.scss文件中。
但是……我真的需要两个同名的文件！
好吧，在某些情况下，您有多个具有相同名称的文件并且您确实需要它，并且您也希望拥有快捷方式。解决方法是包含父路径。例如，在我们的例子中，父文件夹stylings和stylings2文件夹都是src.
我们可以将.angular.cli.json配置更新为以下内容：
{
...
"apps": [{
"root": "src",
...
"stylePreprocessorOptions": {
"includePaths": [
"."
]
}
}]
}
然后，在您的 中hello.component.scss，您可以参考以下两个变量文件，
// hello.component.scss
@import "stylings/variables";
@import "stylings2/variables";
h1 {
color: $brand-color;
font-size: $font-size-large;
}
嗯，这并不完美，要输入的字数略多，但总比../../../对不对？另外，在同一个项目中有多个同名样式文件的情况可能很少见，我猜？
另一种较短的解决方法是包括父路径和一个样式路径：
{
...
"apps": [{
"root": "src",
...
"stylePreprocessorOptions": {
"includePaths": [
".",
"./stylings"
]
}
}]
}
您可以在hello.component.scss.
// hello.component.scss
@import "variables"; // shorter, don't need styling/ as it's one of the configured paths
@import "stylings2/variables";
h1 {
color: $brand-color;
font-size: $font-size-large;
}
在 node_modules 中包含路径怎么样？
Angular CLI 配置也适用于文件node_modules。假设您正在使用自定义样式 npm 包，例如bootstrap-sass模块。
npm install bootstrap-sass --save
下面是 bootstrap-sass 的文件夹结构：
- node_modules
- bootstrap-sass
- assets
- stylesheets
- bootstrap
- ...
- _grid.scss
- _variables.scss
假设您想使用引导程序的_variables.scss，您可以更新您的.angular.cli.json文件以包含引导程序路径，
{
...
"apps": [{
"root": "src",
...
"stylePreprocessorOptions": {
"includePaths": [
".",
"./stylings",
"../node_modules/bootstrap-sass/assets/stylesheets"
]
}
}]
}
然后，在你的hello.component.scss，你可以参考引导变量文件，如下所示，
// hello.component.scss
@import "variables";
@import "stylings2/variables";
@impoer "bootstrap/variables";
h1 {
color: $brand-color;
font-size: $font-size-large;
font-family: $font-family-serif;
}
概括
让我们../../../使用这个有用的 Angular CLI 配置删除相对路径地狱 ( )！
就是这样。快乐编码！
