Importing problem of ng-zorro-antd.less in scss files

[shrezaaa]

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-ivy?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

When we import @import "node_modules/ng-zorro-antd/ng-zorro-antd.less";

We get an error in the terminal I am using ng-zorro 18.0.1 and angular 18 with nx 19.4, Error is: X [ERROR] Cannot find module 'node_modules\ng-zorro-antd\style\color\tinycolor2'

node_modules/ng-zorro-antd/style/color/tinyColor.js:1:19: 1 │ const tinycolor = require('./tinycolor2'); ╵ ^

The plugin "angular-less" was triggered by this import

angular:styles/global:styles:3:8:

What is expected?

I expect it to run as same as ng-zorro 17

What is actually happening?

It won't compile project now

Environment	Info
ng-zorro-antd	18.0.1
Browser	Chrome

[Laffery]

I had met the same issue, and the currently workaround is like this

- @import "node_modules/ng-zorro-antd/ng-zorro-antd.less";
+ @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less"; // use real relative path

[shrezaaa]

@Laffery Thank you, the issue has been resolved.

[JoniVR]

I'm still facing this issue, even with @Laffery 's comment. Anyone got any other ideas?

[marct83]

I'm also having the same issue. @Laffery's fix didn't worj.

[JoniVR]

My solution was to remove all @import less imports in component less files and only use css variables. I then mapped the less variables to the css variables in the general theme file.

Basically, just avoiding less imports in my components resolved it. Not easy but better than not being able to build.