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/