众所周知，我们使用AngularCLI创建组件后，每个组件都会有自己专属的样式文件。通常，还有另一种可能性，您可能需要在组件中包含全局样式文件（尤其是变量文件）。假设src/stylings文件夹下有一个文件：_variables.scss：其内容如下：//your_variables.scssfile$brand-color:#800000;我们的组件模板文件：

HelloWorld!

组件的样式文件：//hello.component.scss@import"../../../样式/变量”；//thisisnotcool!h1{color:$brand-color;}上面代码中的层级结构操作符../表示当前目录的父目录，可读性差，容易出错。如果您的项目是使用AngularCLI生成的，您可以在.angular.cli.json文件中添加配置stylePreprocessorOptions>includePaths。此配置允许开发人员添加额外的基本路径来检查导入。它告诉AngularCLI在处理每个组件样式文件之前在上述路径中查找样式文件。例如，在我们的例子中，让我们将./stylings添加到路径中。由于config接受数组类型，我们可以添加多个路径。{..."apps":[{"root":"src",..."stylePreprocessorOptions":{"includePaths":["./stylings"]}}]}请注意，在更高版本的Angular项目中，上面的配置位于文件angular.json:"stylePreprocessorOptions":{"includePaths":["./projects","./projects/storefrontstyles/scss","./feature-libs"]}，现在我们可以修改我们的组件样式文件：//hello.component.scss@import"variables";//更改为变量，告别../../../stylings/h1{color:$brand-color;}如果我们有两个同名的全局样式文件，但位于不同的目录中，如何我们应该配置它们吗？例如，我们有以下层次结构：_variables.scss文件的内容：//stylings2/_variables.scss$brand-color:blue;$font-size-large:40px;添加scss文件所在目录，stylings2到IncludePaths数组：更新组件自身的scss文件：//hello.component.scss@import"变量";h1{颜色：$brand-color;font-size:$font-size-large;}刷新应用，遇到错误信息：undefinedvariable。虽然stylings2文件夹下的variables.scss文件，确实定义了变量$font-size-large，但是项目无法正确解析。事实证明，如果有多个同名文件，AngularCLI只会选择第一个具有匹配名称的文件。在这种情况下，它将选择./stylings文件夹下的_variables.scss文件。这就是它不能获取变量$font-size-large的原因，因为这个变量是在styling2/_variables.scss文件中定义的。解决方案将angular.json中includePaths的值改为styling和styling2这两个文件夹的父文件夹。{...“应用程序”：[{“root”：“src”，...“stylePreprocessorOptions”：{“includePaths”：[“。”]}}]}然后修改Component的scss文件如下，直接在styling和styling2的父文件夹路径处引用：//hello.component.scss@import"stylings/variables";@import"stylings2/variables";h1{颜色：$品牌颜色；字体大小：$font-size-large;}