如果需要全局更改某個(gè)組件的顏色時(shí)兵志，則需要自定義主題戳稽。
1. 添加babel-plugin-import
babel-plugin-import 是一款 babel 插件艰管，它會(huì)在編譯過程中將 import 的寫法自動(dòng)轉(zhuǎn)換為按需引入的方式
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. 創(chuàng)建vue.config.js
引入path乖仇，hack中的地址需要絕對(duì)路徑，
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. 重啟項(xiàng)目
對(duì)比一下效果
QQ截圖20200703163133.jpg
QQ截圖20200703163625.jpg
