Angular 9 SCSS Global Variable

取之於網路，回饋網路。感恩。

step 1. 建立 style=scss 的專案 / 把專案的 css 改 scss
step 2. 設定 global variable
step 3. 設定 @import 捷徑

步驟

step 1. 建立 style=scss 的專案 / 把專案的 css 改 scss

因為之前是建 style=css，只好手動改檔案和 component 的 styleUrls， css-> scss。

step 2. 設定 global variable

在 src 底下建立一個全域的 SCSS 變數檔 _variables.scss

檔案結構

src
|- app
|--- your-component
|----- your-component.scss
|- _variables.scss
|- styles.scss
|- angular.json

設定變數

$primary: #7bb1eb;
$secondary: #da9a8a;
$tertiary: #73c2c1;

在 component 的 SCSS @import 變數

@import '../../_variables.scss';

button {
  background: $tertiary;
}

step 3. 設定 @import 捷徑

@import '../../_variables.scss'; 看到這種寫法就會想管理路徑。
找到 src 底下的 angular.json （在之前的版本可能是 angular-cli.json）。
找到 architect，在 build 下一層加上 stylePreprocessorOptions，path 看自己把_variable 放哪個資料夾下，如果檔案多可以加一層 style 管理就是 ./src/style。

    "stylePreprocessorOptions": {
        "includePaths": [
              "./src"
        ]
    },

完成：

  "architect": {
    "build": {
        "styles": [
            略
        ],
        "stylePreprocessorOptions": {
            "includePaths": [
                  "./src"
            ]
        },

your-component.scss

@import '_variables.scss';

參考

• Angular - Shortcut to Importing Styles Files in Components
• Using Sass with the Angular CLI