乐趣区

关于antd:antdthemegenerator-动态主题报错没有对应文件-rootentrynameless

最近在开发我的项目时,应用了最新的 antd,发现在联合动静主题更换插件 antd-theme-generator 时提醒报错:

Error: ENOENT: no such file or directory, open ‘xxxxx/node_modules/antd/lib/style/themes/@{root-entry-name}.less’

查看 Ant Design 官网也有给出更新的提醒,在 动静主题(实验性)

相干变更 #
为了实现 CSS Variable 并放弃原始用法兼容性,咱们于 dist/antd.xxx.less 文件中增加了 @root-entry-name: xxx; 入口注入以反对 less 动静加载对应的 less 文件。个别状况下,你不须要关注该变动。然而,如果你的我的项目中间接援用了 lib|es 目录下的 less 文件。你须要在 less 入口处配置 @root-entry-name: default;(或者 @root-entry-name: variable;)以使 less 能够找到正确的入口。

此外,咱们将 lib|es/style/minxins/index.less 中的 @import ‘motion’ 和 @import ‘reset’ 迁徙至了 lib|es/style/themes/xxx.less 中,因为这两个文件依赖了主题相干变量。如果你应用了相干外部办法,请自行调整。当然,咱们还是倡议间接应用 dist 目录下的 antd.less 文件而非调用外部文件,因为它们常常会受重构影响。

因为在没有更新到最新版本 4.17.4antd-theme-generator 插件都没有报错,然而最新版本就是应用不了,最初在看了 antd-theme-generator 的源码后找到了问题。

问题定位:

// antd-theme-generator -> index.js 458 行:// 这里将所有变量捆绑到一个文件中执行报错
let antdLess = await bundle({src: antdStylesFile,});

寻找问题

bundle 办法是援用了 less-bundle-promise;最初定位到 less-bundle-promise 下的 buildContents 办法获取文件报错;// 21 行:imported = line.replace(stringLiteralRegex, '$1');

引入的的 less 文件,后续并没有将变量 @{root-entry-name} 替换,还是原始援用,造成找不到文件;

解决问题

因为动静生成主题不是生产依赖,所以能够更改源码,这里我只是为了解决我的项目问题,在 21 行上面直接判断替换变量。@{root-entry-name} 替换为 default;// 解决 @{root-entry-name} 报错问题;
// 当然还有更好的正则替换或其余形式,这里只是解决问题间接更改
if (imported === './@{root-entry-name}.less') {imported = './default.less'}

总结

对于我的项目中的依赖降级过后,总会有一些兼容问题产生,咱们在网上没有解决方案时,就须要依据现有的提醒错误信息去寻找原因,查看源码也是一份必修课,望能给给位小伙伴们提供到帮忙。(^-^)

退出移动版