NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design
https://ng.ant.design
MIT License
8.87k stars 3.94k forks source link

Unable to use less.render to build CSS #8618

Closed cipchk closed 4 months ago

cipchk commented 4 months ago

To install the ng-zorro-antd dependency in a new Angular project:

And add test.js, after run node ./test.js:

const less = require('less');

const themeContent = `
@import 'ng-zorro-antd/style/themes/default.less';

body {
  color: @primary-color;
}
`;

less.render(themeContent, {
  paths: ['node_modules/']
}).then(data => {
  console.log('css => ', data.css);
}).catch(e => {
  console.log(e);
});

Returns an error:

LessError: Cannot find module 'node_modules/ng-zorro-antd/style/color/tinycolor2'
Require stack:
- /Users/cipchk/Desktop/work/delon/node_modules/less/lib/less-node/plugin-loader.js
- /Users/cipchk/Desktop/work/delon/node_modules/less/lib/less-node/index.js
- /Users/cipchk/Desktop/work/delon/node_modules/less/index.js
- /Users/cipchk/Desktop/work/delon/a.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1134:15)
    at Module._load (node:internal/modules/cjs/loader:975:27)
    at Module.require (node:internal/modules/cjs/loader:1225:19)
    at require (node:internal/modules/helpers:177:18)
    at /Users/cipchk/Desktop/work/delon/node_modules/less/lib/less-node/plugin-loader.js:16:24
    at eval (eval at AbstractPluginLoader.evalPlugin (/Users/cipchk/Desktop/work/delon/node_modules/less/lib/less/environment/abstract-plugin-loader.js:54:22), <anonymous>:3:19)
    at AbstractPluginLoader.evalPlugin (/Users/cipchk/Desktop/work/delon/node_modules/less/lib/less/environment/abstract-plugin-loader.js:55:13)
    at loadFileCallback (/Users/cipchk/Desktop/work/delon/node_modules/less/lib/less/import-manager.js:101:43) {
  type: 'Syntax',
  filename: 'node_modules/ng-zorro-antd/style/color/tinyColor.js',
  index: undefined,
  line: 1,
  column: 19,
  callLine: NaN,
  callExtract: undefined,
  extract: [ undefined, "const tinycolor = require('./tinycolor2');", '' ]
}

It seems that @plugin doesn't support require. It's normal for files like bezierEasing.js not to use require. However, for plugins like tinyColor.js and colorPalette.js, tinycolor2.js cannot be found.

HyperLife1119 commented 4 months ago

You can try making the following changes:

less.render(themeContent, {
  paths: [__dirname + '/node_modules/'] // <-- add __dirname
}).then(data => {
  console.log('css => ', data.css);
}).catch(e => {
  console.error(e);
});