我最近在研究 Nx 時遇到了一個坑，這個坑讓我卡了兩、三個小時，所以我將這件事情筆記下來，希望如果以後有人遇到類似的問題，這篇筆記多少可以幫得上忙。

問題描述

在 Angular 專案裡我們經常會看到各種 tsconfig.json ，而這些 tsconfig.json 又繼承來繼承去的，雖然一般我們不會特別去動他們的設定，但當我們因為某些緣故需要去調整的時候，就要特別小心「覆蓋」的問題。

而我遇到的狀況是，我在使用 JSZip 這個套件時，遇到了下圖中的 Error ：

解決辦法是在 apps/app-name/tsconfig.app.json 的 compilerOptions 裡加上 path 的配置：

1
2
3
4
5
6
7
8
9
10
11
12

{
  "//": "...",
  "compilerOptions": {
    "//": "...",
    "paths": {
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    }
  }
  "//": "..."
}

加上之後， JSZip 的問題解決了，但變成下圖中的 Error ：

我百思不得其解，因為 ng serve 沒有問題，但 build 的時候就會說找不到，而我也試了很多方式都解不掉這個問題。

後來我想到，會不會是因為設定會被覆蓋的關係？！

因為原本 libs 裡的 import 路徑會在專案根目錄的 tsconfig.json 裡設定，而 tsconfig.json 們會像下圖這樣繼承配置：

1. apps/app-name/tsconfig.json 繼承 ./tsconfig.json 裡的配置 。
2. apps/app-name/tsconfig.app.json 再繼承 apps/app-name/tsconfig.json 裡的配置。

因此，當我們一開始在 apps/app-name/tsconfig.app.json 加上因應 JSZip 的 paths 配置時，就覆蓋掉原本在 ./tsconfig.json 裡的 paths 配置，造成找不到 libs 裡 export 的 module 的問題。

解決辦法

解決這個問題的辦法基本上有兩個：

1. 在 apps/app-name/tsconfig.app.json 的 paths 補上原本在 ./tsconfig.json 的 paths 配置。
2. 將 JSZip 的配置從 apps/app-name/tsconfig.app.json 移到 ./tsconfig.json 裡。

相對來說，第二個方式絕對會比第一個方式好得多。

結論

一般來說，其他的 tsconfig.json 都不太會需要去動，因此只要我們養成習慣，都只在修改在專案根目錄下的 tsconfig.json 的配置就不會有問題了。

參考連結

• How to use paths in tsconfig.json?
• TypeScript - Module Resolution

最近在開始研究 Nx 這個非常好用的開發工具，當然也撞了不少牆…（鼻青臉腫中）。

今天主要要分享的是：

如何在你的 Application 裡，用很漂亮的方式引入 Library 裡的 SCSS

而這個方法是我在這個 issue 裡看到的，留言的人是 tcoz 。

在開始之前，請先準備 Nx 的專案，且裡面有一個 Application 名為 sample 、 一個 Library 名為 sample-lib ，然後在 sample-lib 裡準備一個 abc.scss 。

scss 的內容很簡單：

1
2
3

h1 {
    color: red;
}

接著把 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 ）：

1

@import "abc";

結果：

參考資料

• Angular 官方文件