如果需要全局更改某个组件的颜色时，则需要自定义主题。
1. 添加babel-plugin-import
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
cnpm i babel-plugin-import -D
2.在main.js中引入less
注意顺序，样式要在引入vant前
import 'vant/lib/index.less'
image.png
3. 增加主题样式reset.less（覆盖vant自带主题）
vant主题变量地址：https://github.com/youzan/vant/blob/dev/src/style/var.less
此处我们修改主题按钮的背景色
// Color Palette
@porcelain: #9fcad1;
// Button
@button-primary-background-color: @porcelain;
image.png
4. 创建vue.config.js
引入path，hack中的地址需要绝对路径，
const path = require('path')
module.exports = {
// outputDir: 'dist',
// publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/',
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
'hack': `true; @import "${path.join(__dirname, './src/common/reset.less')}";`,
// 'green': '#9fcad1'
}
}
}
},
pages: {
'index': {
'entry': 'src/main.js',
'title': 'anteater-wap'
}
}
}
5. 修改babel配置文件（babel.config.js）
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
// 指定样式路径
// style: true,
style: name => `${name}/style/less`
}, 'vant']
]
}
6. 重启项目
对比一下效果
QQ截图20200703163133.jpg
QQ截图20200703163625.jpg
