定制主题

    Ant Design 的样式使用了 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整，默认样式变量

    在初始化项目时 ng add ng-zorro-antd 时选择自定义主题即可自动配置好自定义主题的相关文件，修改 src/theme.less 文件内容就可以自定义主题。

    在 src 目录下建立一个单独的 theme.less 文件，在 angular.json 文件的 styles 列表加入该文件

    在样例中通过修改 @primary-color 的数值将 ng-zorro-antd 的基础色修改为 #f5222d，开发者可以根据实际需求自由修改。

    1. // -------- 引入官方提供的 less 样式入口文件 -----------
    2. @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
    4. // -------- 自定义参数覆盖 -----------

    Angular CLI 提供了 的 builder，可以通过该 builder 轻松的调整 webpack 中 less-loader 的配置来进行主题配置。

    • 在 angular.json 中引入 ng-zorro-antd.less 文件
    • 安装 @angular-builders/custom-webpack builder
    1. npm i -D @angular-builders/custom-webpack
    • 在 angular.json 中配置自定义 builder
    1.   "architect": {
    2.     "build": {
    3. -     "builder": "@angular-devkit/build-angular:browser",
    4. +     "builder": "@angular-builders/custom-webpack:browser",
    5.       "options": {
    6. +        "customWebpackConfig": {
    7. +          "path": "./extra-webpack.config.js",
    8. +          "mergeStrategies": {
    10. +          },
    11. +          "replaceDuplicatePlugins": true
    12.         ...
    13.       },
    14.       ...
    15.     },
    16.     "serve": {
    17. -      "builder": "@angular-devkit/build-angular:dev-server",
    18. +      "builder": "@angular-builders/custom-webpack:dev-server",
    19.        ...
    20.     }
    21.     ...
    22.   }