1. 在main.js中引入vant的less文件
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文件的内容如下:
@button-primary-background-color:#ff0000;
3. 修改vue.config.js
根据package.json
中less-loader的版本,可以分为两种配置
- less-loader < 6.0时:
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 >= 6.0 时:
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即可
本文由 程序哩 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Nov 23, 2021 at 07:25 pm