前言回顧

之前的幾天我們結合具體的例子介紹了一些常用元件的相關知識，大部分元件的使用都比較簡單易懂，對於一些複雜場景官網示例也給出了部分解決方案，大家在使用元件之前不妨先瀏覽一下官方示例程式碼。

今天開始我們介紹 NG-ZORRO 中更多的定製化工作，首先我們來介紹一下主題相關的內容。

主題

定製主題

想必大家還記得，我們在開發過程中，修改樣式時經常使用如下語句：

@import "theme";
i[nz-icon] {
  cursor: pointer;
  color: @orange-6;
}

我們在 styles.less 檔案裡 import，然後再需要的地方引入了 theme.less 檔案，並使用全域性 Less 變數，這樣就可以保證在修改 theme.less 檔案中的變數時可以令所有使用該樣式變數的元素生效。

Tips：我們可以使用 @import "theme" 方式引入替代 @import "../../styles/theme" 這種相對路徑形式，只需要在 angular.json 檔案裡配置 stylePreprocessorOptions 即可。

主題檔案結構

我們先看一下主題檔案的配置

src
├── styles
│   ├── rewrite.less
│   └── theme.less
├── styles.less

styles.less 裡只需要 import 全部樣式檔案，這樣形成了 覆蓋樣式rewrite -> 自定義主題theme -> NG-ZORRO 預設樣式 的渲染順序，所有元件樣式變數均可以在 ng-zorro-antd/style/themes/default 下找到：

// styles.less
@import '../node_modules/ng-zorro-antd/ng-zorro-antd.less';
@import "styles/theme";
@import "styles/rewrite";

修改樣式變數

我們先修改一下 theme.less 來看一下效果：

@import "../../node_modules/ng-zorro-antd/style/themes/default";
// The prefix to use on all css classes from ant.
@ant-prefix : ant;
// -------- Colors -----------
@primary-color : #F39C12;

我們看到，所有使用 @primary-color 的元素都變成了新的樣式顏色，這給我們啟發，如果我們單獨提供樣式檔案，打包時載入不同的檔案不就可以實現多種樣式檔案切換了嗎？

多主題檔案

我們先建立好我們需要的樣式檔案：

src/product-configurations
└── styles
    ├── dark
    │   ├── customize_theme.less
    │   └── dark.less
    └── light
        ├── customize_theme.less
        └── light.less

點選檢視樣式檔案配置：styles
我們結合 angular.json 的 configurations 可以配置多個環境，利用 angular.json 中的 stylePreprocessorOptions 設定基準路徑(設定後我們可以不用寫冗長的相對地址)：

"options": {
  ...
  "stylePreprocessorOptions": {
	"includePaths": [
	  "src/styles",
	  "src/product-configurations/styles/dark"
	]
  }
},
"configurations": {
    "light-theme": {
	  "outputPath": "dist/light",
	  "baseHref": "/light/",
	  "deployUrl": "/light/",
	  "stylePreprocessorOptions": {
		"includePaths": [
		  "src/styles",
		  "src/product-configurations/styles/light"
		]
	  }
    },
    "dark-theme": {
	  "outputPath": "dist/dark",
	  "baseHref": "/dark/",
	  "deployUrl": "/dark/",
	  "stylePreprocessorOptions": {
		"includePaths": [
		  "src/styles",
		  "src/product-configurations/styles/dark"
		]
	  }
    }
    ...
}

這樣我們在專案中修改 theme.less，就可以引入樣式檔案，打包時指定不同的主題環境，因為每個主題資料夾下都有同名的 customize_theme 檔案，所以我們打包無需修改任何程式碼：

// theme.less，預設引入 dark 下的 customize_theme.less
@import "../../node_modules/ng-zorro-antd/style/themes/default";
@import 'customize_theme';

試一下打包命令：

$ ng build --project=ng-zorro-ironman2020 --configuration=light-theme
$ ng build --project=ng-zorro-ironman2020 --configuration=dark-theme

這樣就生成了我們需要的包檔案，看一下 dist 資料夾：

dist
├── dark
└── light

我們通過 lite-server 啟動一下看看，分別訪問 http://localhost:3000/dark/index.html 和 http://localhost:3000/light/index.html，我們已經能看到樣式檔案生效了！

總結 & 預告

今天我們介紹瞭如何去定製主題，但是打包需要生成兩個包，雖然我們可以在頁面中設定一個跳轉連結，但是終究不如 url 無變動的樣式切換來得方便，我們將繼續完善主題相關內容，使我們的專案能夠支援生產環境下動態切換主題。

相關資料

• Github 今日程式碼分支：https://github.com/simplejason/ng-zorro-ironman2020/commit/2abd189c30330fd3a5d92940775550ddea19dc9c
• 主題：https://ng.ant.design/docs/customize-theme/zh
• angular.json：https://angular.io/guide/workspace-config
• lite-server：https://github.com/johnpapa/lite-server