开发过程中前端会遇到过很多,需要覆盖原有ui库的样式的情况,基本上都是以v-deep或者important强制修改。
在使用vant2开发过程中,官方说明了一个方式可以直接直接定制主题。
案例:当前我想修改nav-bar的左侧icon的颜色
官方右侧demo默认是蓝色。
1.当前项目main.js确定引入样式文件
// 引入全部样式
import 'vant/lib/index.less';
//引入想修改的组件的单独less文件
import 'vant/lib/nav-bar/style/less';
2.创建一个less文件
src/assets/less/vantChange.less
3.修改配置,当运行的时候直接读取我们自定义的less文件
vue.config.js
const path = require("path");
//less文件的路径
const myTheme = path.resolve(__dirname, "./src/assets/less/vantChange.less");
module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: {
hack: `true; @import "${myTheme}";`
}
},
}
},
}
4.根据官网给出的less变量,修改样式
// nav左侧icon颜色
@nav-bar-icon-color:#333;
此时我再次运行项目,就会变成我自定义的颜色了。