最近在開始研究 Nx 這個非常好用的開發工具，當然也撞了不少牆…（鼻青臉腫中）。
今天主要要分享的是：
如何在你的 Application 裡，用很漂亮的方式引入 Library 裡的 SCSS
而這個方法是我在這個 issue 裡看到的，留言的人是 tcoz 。
在開始之前，請先準備 Nx 的專案，且裡面有一個 Application 名為 sample 、 一個 Library 名為 sample-lib ，然後在 sample-lib 裡準備一個 abc.scss 。
scss 的內容很簡單：
接著把 sample 跑起來，應該會看到以下畫面：
然後先在 Nx 的 angular.json 裡，找到你的專案的 build 配置，大概長這樣：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| {
"//": "...",
"projects": {
"sample": {
"//": "...",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/apps/sample",
"index": "apps/sample/src/index.html",
"main": "apps/sample/src/main.ts",
"polyfills": "apps/sample/src/polyfills.ts",
"tsConfig": "apps/sample/tsconfig.app.json",
"aot": false,
"assets": ["apps/sample/src/favicon.ico", "apps/sample/src/assets"],
"styles": ["apps/sample/src/styles.scss"],
"scripts": []
},
},
"//": "...",
}
}
},
"//": "...",
}
|
然後加上 stylePreprocessorOptions 跟 extractCss 的配置，像這樣：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| {
"//": "...",
"projects": {
"sample": {
"//": "...",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"//": "...",
"stylePreprocessorOptions": {
"includePaths": ["libs/sample-lib/src/lib/scss"]
},
"extractCss": true,
"//": "...",
},
},
"//": "...",
}
}
},
"//": "...",
}
|
includePaths 裡的路徑就是要處理的 SCSS 的資料夾路徑。
如此一來，就可以到 sample 裡的 SCSS 裡 import （我在 sample 裡的 style.scss import ）：
結果：
參考資料
