问题
我使用的依赖:
在 vue.config.js
里配置了
启动服务就报错了:错误如下
Error LessError: Cannot find module 'antd/lib/style/themes/default.less'
LessError: error evaluating function
darken: color.toHSL is not a function
原因排查分析
既然报错说找不到 antd/lib/style/themes/default.less
文件,我们可以去全局搜索哪里使用了 antd/lib/style/themes/default.less
。
我们可以看到在 ant-design-vue-pro\node_modules\antd-theme-webpack-plugin\node_modules\antd-theme-generator\index.js
文件的 362 行使用了。所以问题就定位到了这个文件,而这个文件所在的包是 antd-theme-generator
,antd-theme-webpack-plugin
里面使用了 antd-theme-generator
。
我们找到https://github.com/mzohaibqc/antd-theme-webpack-plugin/blob/master/package.json,可以看到依赖的是 1.2.8
我们查看其他版本的,比如:1.2.3
,发现代码 fileContent = @import "~antd/lib/style/themes/default.less";\n${fileContent};
注释掉了,所以断定是这个依赖的版本有问题。
解决
其实上面的版本 "antd-theme-generator": "^1.2.3"
,要测试出来符合 antd-theme-webpack-plugin: 1.3.9
,需要我们独自分离这两个包,因为我们安装的是 antd-theme-webpack-plugin: 1.3.9
依赖,而 antd-theme-generator
的版本是由 antd-theme-webpack-plugin
控制的。
我的做法是自己复制一份 antd-theme-webpack-plugin
的代码,当做我们的自定义插件,然后自己主动安装 "antd-theme-generator": "^1.2.3"
即可。
我们新建一个 ant-design-vue-pro\webpack-plugins\antd-theme-webpack-plugin.js
插件:里面的代码直接复制 antd-theme-webpack-plugin
的代码。
然后安装依赖,webpack-sources
有就不需要安装了。然后我从 1.2.0
开始往上找,找到了 1.2.3
版本不会报错。
最后修改 vue.config.js
配置里的引用自己定义的插件,其他不需要改动。
启动服务,就没有报错了。