angular——全局样式

假如项目创建使用 --style=sass 选项, 这是一个 .sass
文件的代替, 同样适用于 scss/less/styl.

您可以通过 angular.json 中项目的构建目标选项中的 styles 选项添加更多全局样式。这些将被加载，就像您将它们添加到index.html中的标记中一样。

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "styles": [
        "src/styles.css",
        "src/more-styles.css",
      ],
      ...

您也可以使用对象格式重命名输出并延迟加载它：

"styles": [
  "src/styles.css",
  "src/more-styles.css",
  { "input": "src/lazy-style.scss", "lazy": true },
  { "input": "src/pre-rename-style.scss", "bundleName": "renamed-style" },
],

在Sass和Stylus中，您还可以使用组件和全局样式的 includePaths 功能，这允许您添加额外的基准路径，这些基准路径将被检查以导入。

要添加路径，请使用 stylePreprocessorOptions 选项：

"stylePreprocessorOptions": {
  "includePaths": [
    "src/style-paths"
  ]
},

该文件夹中的文件，例如 ‘src/style-paths _variables.scss’，可以从项目中的任何位置导入，而不需要相对路径：

// src/app/app.component.scss
// A relative path works
// 相对路径工作
@import '../style-paths/variables';
// But now this works as well
// 但现在也工作
@import 'variables';

注意：如果需要它们进行单元测试，您还需要向测试生成器添加任何样式。