1. 在main.js中引入vant的less文件
1
2
3
4
5
6
7
8
| import Vant from 'vant'
import 'vant/lib/index.css'
import 'vant/lib/index.less';
import 'vant/lib/button/style/less';
|
2. 创建一个复写的less文件
创建一个名为vant-overwrite.less的覆写文件，存放到src/assets/css/。
这里用button做个测试，把按钮的背景色从绿色替换为红色，less文件的内容如下：
1
| @button-primary-background-color:#ff0000;
|
3. 修改vue.config.js
根据package.json中less-loader的版本，可以分为两种配置。
less-loader < 6.0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| const path = require("path");
const theme = path.join(__dirname, './src/assets/css/vant-overwrite.less');
module.exports = {
...
css: {
loaderOptions: {
less: {
modifyVars: {
hack: `true; @import "${theme}";`
},
},
},
}
...
}
|
less-loader >= 6.0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| const path = require("path");
const theme = path.join(__dirname, './src/assets/css/vant-overwrite.less');
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
hack: `true; @import "${theme}";`
},
},
},
},
}
}
|
4. 重新运行 npm run serve即可
![]()
