Angular CLI 如何把預處理變量變成全局的

Angular-cli建立的項目能夠選擇css的預處理scss做爲style文件的默認預處理格式。scss能夠設置變量，函數，同時使用繼承，混入等方法達到更方便，通用的效果。

一般狀況下，咱們會設計一些通用的變量在各個地方使用，如何將通用變量的文件一次引入，全局使用呢？

解決辦法： 這個方法有問題，彷佛在angular-cli7 上不起做用

// 通用變量文件 _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
　　}

 方法二：

您只須要添加更多配置，所以在聲明全局變量的地方，您須要將其包裝起來:root{}。因此src/styles/settings/_variables.scss。

:root 
{
--blue: #00b; // or any global you wish to share with components 
}

而後，當您在SCSS中使用它們時，您將須要像這樣訪問它們。

.example-class {
  background-color: var(--blue)
}

這就是我當前的項目如何處理全局變量，它彷佛運做良好。這將消除在您使用的每一個scss文件中導入變量的須要。