在定制主题的时候,参照Ant Design Vue 文档中 theme 属性的方案配置,配合使用 less-loader 的 modifyVars 的时候报错,爬了很久的坑。
在 webpack.base.conf.js
的 rules
中添加
{
test: /\.less$/,
loader: 'less-loader',
options: {
javascriptEnabled: true
}
}
报错
Module build failed:
// load the styles
var content = require("!!../../../../css-loader/index.js??ref--8-1!../../../../postcss-loader/lib/index.js??ref--8-2!../../../../less-loader/dist/cjs.js??ref--8-3!./index.less");
^
Unrecognised input
...
解决方案
新版的 webpack 在 build/utils.js
已经对less-loader
默认做了配置,只需要在 utils.js
中进行配置即可。
找到 less: generateLoaders('less')
一行,修改为:
less: generateLoaders('less', {javascriptEnabled: true, modifyVars: packageConfig.theme}),
即可完成定制主题的需求。