最近在开发我的项目时,应用了最新的 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.4
,antd-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'}
总结
对于我的项目中的依赖降级过后,总会有一些兼容问题产生,咱们在网上没有解决方案时,就须要依据现有的提醒错误信息去寻找原因,查看源码也是一份必修课,望能给给位小伙伴们提供到帮忙。(^-^)