关于前端:使用-Angular-Shortcut-导入-style-文件

假如咱们的 Angular 我的项目具备下列这个文件构造：

在一个典型的 Angular 我的项目中，通常会有很多组件。每个组件都有本人的样式表（CSS、SCSS、LESS 等）。Angular 开发人员可能常常须要在组件中蕴含全局款式文件（特地是变量文件），比方上图的 _variables.scss.

在 hello.component.scss 里须要导入全局 scss 款式，须要向上面这样重复应用 .. 这种 相对路径 语法来向上回溯：

// hello.component.scss
@import "../../../stylings/variables"; // this is not cool!

h1 {color: $brand-color;}

这种相对路径语法非常容易出错。

如果你的我的项目是应用 Angular CLI 生成的，你能够在 .angular.cli.json 文件中增加一个 stylePreprocessorOptions > includePaths 的配置。这个配置容许你增加额定的根底门路，用于查看导入。它通知 Angular CLI 在解决每个组件款式文件之前，在这些门路中查找款式文件。

例如，在咱们的状况下，让咱们将 ./stylings 增加到门路中。因为该配置承受一个数组，你能够增加多个门路。

{
    ...
    "apps": [{
        "root": "src",
        ...
        "stylePreprocessorOptions": {
            "includePaths": ["./stylings"]
        }
        
    }]
}

当初咱们能够对 component 的 scss 文件进行重构：

// hello.component.scss
@import "variables"; // change to just variables, say goodbye to ../../../stylings/

h1 {color: $brand-color;}

在 Angular 我的项目中，angular.json 文件是一个重要的配置文件，它蕴含了我的项目的各种元数据和配置信息。其中，stylePreprocessorOptions 字段用于配置款式处理器选项。

stylePreprocessorOptions 字段容许你设置 Sass/Less 等 CSS 预处理器的选项。这些选项能够包含全局变量、混合（mixins）等。通过在 angular.json 文件中配置 stylePreprocessorOptions 字段，你能够将这些选项利用到整个我的项目中，而不须要在每个组件中都独自设置。

一个常见的用例是通过 stylePreprocessorOptions > includePaths 配置选项，将全局的款式文件门路增加到 Angular CLI 的编译上下文中。这样，在编译组件时，就能够间接援用全局款式文件中定义的变量和混合。这种用法称之为 shortcut。

总之，stylePreprocessorOptions 字段的作用是容许你在 Angular 我的项目中应用预处理器，并提供了一些选项来配置预处理器的行为。