首页 新闻 会员 周边 捐助

运行 grunt 时报错 "Cannot find module 'node_modules\ng-zorro-antd\style\color\tinycolor2'"

0
悬赏园豆:30 [待解决问题] 浏览: 35次

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 问题的后续

dudu的主页 dudu | 高人七级 | 园豆:27977
提问于:2024-12-05 16:15
< > 人人可用的开源BI工具
分享
所有回答(2)
0

在使用 Grunt 进行 LESS 编译时遇到 "Cannot find module 'node_modules\ng-zorro-antd\style\color\tinycolor2'" 的错误,通常是因为缺少某些依赖或者特定的模块路径问题。由于您提到在执行 ng build 时没有遇到这个问题,这可能与 Grunt 的配置或工作目录不同有关。

以下是一些解决您问题的步骤和建议:

1. 确保 TinyColor 已正确安装

首先,确保 tinycolor2 模块已正确安装,可以在项目的 node_modules 中找到。如果没有,您可以尝试手动安装它:

npm install tinycolor2 --save

然后重新运行 Grunt 命令。

2. 检查 ng-zorro-antd 的版本

确认你使用的 ng-zorro-antd 的版本。在某些版本中,可能存在路径不正确的问题。考虑更新到最新版本确保所有依赖项都是最新的:

npm update ng-zorro-antd

3. 修改 Grunt 配置

有时候,Gruntfile.js 中的配置可能指向不正确的 LESS 文件。请检查 Gruntfile.js 中与 LESS 任务相关的配置,确保其配置正确。特别是要确保 LESS 的入口文件和路径都是正确的。

4. 清理项目和缓存

有时,npm 的缓存或目录中的某些旧文件可能导致问题。可以尝试以下步骤:

npm cache clean --force
rm -rf node_modules
npm install

5. 调整 LESS 引入路径

在 LESS 文件中,尝试调整引入的路径,使用相对路径代替直接从 node_modules 引入。确保 LESS 文件中引用 tinycolor 的地方是正确的。

例如:

@import '../../node_modules/ng-zorro-antd/style/color/tinycolor2.less';

确保路径的正确性。

6. 使用 --force 选项

虽然这不是最佳实践,但您可以尝试使用 --force 运行动作,强制继续编译甚至在出现错误的情况下。这可以帮助您在暂时绕过错误的地方继续工作:

grunt less:production --force

7. 检查依赖冲突

有时候,项目中其他依赖与 ng-zorro-antdtinycolor2 之间可能存在版本不兼容的情况。检查 package.json 中所有涉及的包,并进行必要的更新。

8. 汇报问题

如果所有步骤都未能解决问题,考虑到可能是 ng-zorro-antd 的问题,可以在它的 GitHub 存储库中检查相关问题和讨论,或者提交新问题。

总结

您遇到的错误可能是 tinycolor2 模块缺失或引入不正确路径造成的。通过确认其安装、版本更新、调整文件引入路径和清理项目缓存,通常可以解决这个问题。如果这些步骤无效,请查看更具体的错误日志或考虑报告问题以获得进一步支持。

Technologyforgood | 园豆:7872 (大侠五级) | 2024-12-11 16:54
0

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
dudu | 园豆:27977 (高人七级) | 2024-12-11 22:41
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册
Top