npm 运行 grunt 时出现下面的错误
Running "less:production" (less) task
>> node_modules\ng-zorro-antd\style\color\tinyColor.js: [L1:C19] Cannot find module 'node_modules\ng-zorro-antd\style\color\tinycolor2'
Warning: Error compiling ./src/styles/code-sandbox.entry.less Use --force to continue.
请问如何解决?
同样的 less 文件,ng build
时没这个问题,这是 https://q.cnblogs.com/q/150404 问题的后续
在使用 Grunt 进行 LESS 编译时遇到 "Cannot find module 'node_modules\ng-zorro-antd\style\color\tinycolor2'"
的错误,通常是因为缺少某些依赖或者特定的模块路径问题。由于您提到在执行 ng build
时没有遇到这个问题,这可能与 Grunt 的配置或工作目录不同有关。
以下是一些解决您问题的步骤和建议:
首先,确保 tinycolor2
模块已正确安装,可以在项目的 node_modules
中找到。如果没有,您可以尝试手动安装它:
npm install tinycolor2 --save
然后重新运行 Grunt 命令。
确认你使用的 ng-zorro-antd
的版本。在某些版本中,可能存在路径不正确的问题。考虑更新到最新版本确保所有依赖项都是最新的:
npm update ng-zorro-antd
有时候,Gruntfile.js 中的配置可能指向不正确的 LESS 文件。请检查 Gruntfile.js
中与 LESS 任务相关的配置,确保其配置正确。特别是要确保 LESS 的入口文件和路径都是正确的。
有时,npm 的缓存或目录中的某些旧文件可能导致问题。可以尝试以下步骤:
npm cache clean --force
rm -rf node_modules
npm install
在 LESS 文件中,尝试调整引入的路径,使用相对路径代替直接从 node_modules
引入。确保 LESS 文件中引用 tinycolor
的地方是正确的。
例如:
@import '../../node_modules/ng-zorro-antd/style/color/tinycolor2.less';
确保路径的正确性。
--force
选项虽然这不是最佳实践,但您可以尝试使用 --force
运行动作,强制继续编译甚至在出现错误的情况下。这可以帮助您在暂时绕过错误的地方继续工作:
grunt less:production --force
有时候,项目中其他依赖与 ng-zorro-antd
和 tinycolor2
之间可能存在版本不兼容的情况。检查 package.json
中所有涉及的包,并进行必要的更新。
如果所有步骤都未能解决问题,考虑到可能是 ng-zorro-antd
的问题,可以在它的 GitHub 存储库中检查相关问题和讨论,或者提交新问题。
您遇到的错误可能是 tinycolor2
模块缺失或引入不正确路径造成的。通过确认其安装、版本更新、调整文件引入路径和清理项目缓存,通常可以解决这个问题。如果这些步骤无效,请查看更具体的错误日志或考虑报告问题以获得进一步支持。
esbuild 没这个问题,改用 esbuild
esbuild 脚本 build-assets.ts
import * as path from 'path';
import esbuild, { BuildOptions } from 'esbuild';
import { lessLoader } from 'esbuild-plugin-less';
const entryPoints = [
'code-sandbox.entry.less',
'mce.entry.less',
];
entryPoints.forEach((v, i) => {
entryPoints[i] = path.resolve(__dirname, '../../src/styles', v);
});
(async () => {
const buildOptions: BuildOptions = {
entryPoints: entryPoints,
minify: true,
bundle: false,
plugins: [lessLoader()],
outdir: path.resolve(__dirname, '../../dist/assets'),
};
await esbuild.build(buildOptions);
})();
运行 build-assets.ts
npx tsx build-assets.ts