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 #global css variable







你可能感興趣的文章

[29] 文法 - 運算子優先序、結合性

[29] 文法 - 運算子優先序、結合性

從找房子理解 ETL scheduling

從找房子理解 ETL scheduling

Test

Test






留言討論