Angular-cli创建的项目可以选择css的预处理scss作为style文件的默认预处理格式。scss可以设置变量，函数，同时使用继承，混入等方法达到更方便，通用的效果。
通常情况下，我们会设计一些通用的变量在各个地方使用，如何将通用变量的文件一次引入，全局使用呢？
解决办法：
// 通用变量文件 _variables.scss
$red: #e0301e;
// 全局scss文件 styles.scss
/* You can add global styles to this file, and also import other style files */
@import 'assets/scss/variables';
// angular.json 配置预处理路径和样式路径
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-toolkits",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/assets/scss"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
// 某个component使用$red变量 sde-menu-items.scss
button {
background-color: $red
}