Angular技巧之Angular CLI 如何把预处理变量变成全局的

Angular CLI 创建的项目可以选择css的预处理 less 作为 style 文件的默认预处理格式。less 可以设置变量，函数，同时使用继承，混入等方法达到更方便，通用的效果。

通常情况下，我们会设计一些通用的变量在各个地方使用，如何将通用变量的文件一次引入，全局使用呢？

笔者在assess目录下有一个less的变量文件

src/assets/less/variables.less

@app-amber: #f9b551;
@title-ml: 8px;
@table-border-c: #e1e6eb;               //table default border color

之前在组件的less文件中是这样引入使用的

@import "../../../assets/less/variables";
.title {
  color: @app-amber
}

这对于一个复杂的项目结构来说是很痛苦的。更糟糕的是，当您试图重构该结构时，移动文件的时候还要改变variables.less文件的引用路径。那么导入LESS文件的首选方式是什么呢?

angular.json中的stylePreprocessorOptions属性。

stylePreprocessorOptions允许您的Angular在编译时引入的额外基路径。

比如想下面这样改造我们的angular.json

"stylePreprocessorOptions": {
  "includePaths": [
    "src/assets/less"
  ]
}

...
"build": {
  "options": {
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true,
    "assets": [
      "src/favicon.png",
      "src/assets"
    ],
    "stylePreprocessorOptions": {		// 此处新增
      "includePaths": [
        "src/assets/less"
      ]
    },
    "styles": [
      "src/styles.less"
    ],
    "scripts": [
     ...
    ]
  },
},
...

所以现在当项目编译时，导入会被简化为:

@import "variables";

很方便对不对，再也不用担心项目路径了！

参考资料：https://www.ronin.consulting/front-end/angular-you-may-have-missed-this/