Ng-zorro-antd: Error compiling Angular application implementing Ant design dark theme

[kaname-png]

Steps to reproduce

Import the Ant Design styles "ng-zorro-antd/ng-zorro-antd.less"
Import the dark theme styles from "ng-zorro-antd/style/dark.less"

Example (in styles.less file):

// -------- import Ant design less style file -----------
@import '~ng-zorro-antd/ng-zorro-antd.less';
// -------- import Theme dark for Ant design ------------
@import '~ng-zorro-antd/style/dark.less';

What is expected?

Let the Angular app successfully compile and show Ant design with the dark theme.

What is actually happening?

It does not allow to compile the Angular application showing the following error in the console.

ERROR in ./src/styles.less (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/less-loader/dist/cjs.js??ref--14-3!./src/styles.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):



.antTreeFn(@tree-prefix-cls);
^
JavaScript evaluation error: 'ReferenceError: colorPalette is not defined'
      in C:\Users\Sawako\Documents\Proyectos\Kodachi\Frontend\client-web\node_modules\ng-zorro-antd\tree\style\index.less (line 217, column 0)

| Environment | Info |
|---|---|
| ng-zorro-antd | 9.0.0-beta.3 |
| Browser | Microsoft Edge V80.0.361.111 |

[Jbz797]

Same here.

I fixed it with this at the top of my theme.less :

@import "~ng-zorro-antd/style/color/colorPalette.less";
@import "~ng-zorro-antd/ng-zorro-antd.less";
@import "~ng-zorro-antd/style/dark.less";

[hsuanxyz]

@taksumaki @Jbz797 Thanks for your report.

This is a docs error, the following is the correct import order.

@import "~ng-zorro-antd/style/dark.less";
@import "~ng-zorro-antd/ng-zorro-antd.less";

We are about to provide new theme bundle files, you can use them like this:

@import "~ng-zorro-antd/ng-zorro-antd.dark.less";