前言
Vant官网的中文教程备注了less-loader版本<6,需要移除lessOptions，但是，英文教程却没有此备注。导致看英文教程的我，折腾了大半天，自定义变量始终未生效。
查看Vant的相关issue也没有提及版本问题，故写此文章，希望帮助看到的小伙伴避坑。
配置
脚手架：vue-cli3以上
第一步： 引入样式文件
- 按需引入(babel.config.js )
module.exports = {
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
// 指定样式路径
style: (name) => `${name}/style/less`,
},
'vant',
],
],
};
- 手动引入样式
// 引入全部样式
import 'vant/lib/index.less';
// 引入单个组件样式
import 'vant/lib/button/style/less';
第二步：修改样式变量 （vue.config.js）
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
// 直接覆盖变量(这里不需要@符号)
'text-color': '#111',
'border-color': '#eee',
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
hack: `true; @import "your-less-file-path.less";`,
},
},
},
},
},
};
注意点
- 变量重置未生效
查看less-loader版本，若小于 6.0，请移除 lessOptions 这一级，直接配置选项。如下：
css: {
loaderOptions: {
less: {
// 注意：这里没有lessOptions
modifyVars: {
hack: `true; @import "${path.join(
__dirname,
'./src/styles/theme.less'
)}";`
},
},
},
},
-
自定义主题色的路径加载
image.png
解决方案： 使用绝对路径
modifyVars: {
// 重置vant的部分变量（如：主题色）
hack: `true; @import "${path.join(
__dirname,
'./src/styles/theme.less'
)}";`
},
