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
　　}