vue使用Vant自定义主题
https://youzan.github.io/vant/#/zh-CN/theme这是官网给的说明,个人感觉有点坑,对于我这中vue小白实在是看不明白。一、为什么需要自定义主题。当vant的主题不满足你的要求时可以根据自己的要求进行修改,比如:所有的颜色要改。二、自定义主题1、在main.js中引入lessimport 'vant/lib/index.le...
https://youzan.github.io/vant/#/zh-CN/theme 这是官网给的说明,个人感觉有点坑,对于我这中vue小白实在是看不明白 。
一、为什么需要自定义主题。
当vant的主题不满足你的要求时可以根据自己的要求进行修改,比如:所有的颜色要改。
二、自定义主题
1、在main.js中引入less
import 'vant/lib/index.less';
2、创建属于自己的less,比如:index.less
3、引入自己的less
打开utils.js文件,找到如下图:
把图中画红框的部分,修改成为:
less: generateLoaders('less', {
modifyVars: {
'hack': `true; @import "${path.join(__dirname, '../src/assets/less/index.less')}";`
}
}),
注意:${path.join(__dirname,'自己的less文件所在位置')}是获取绝对路径
4、安装less
npm install less less-loader --save-dev
5、启动测试,如果不报错,恭喜你成功了。如果启动失败,绝大多数是因为版本的问题,不同版本之间配置文件有些差别
6、修改vant样式,这是less变量参考:https://github.com/youzan/vant/blob/dev/src/style/var.less,我只贴了一些基础变量,到自己的less文件中。
7、我们修改@blue的颜色,看看是否有变化
修改之前
我们把@blue: #008FD7;改为@blue: red;看下效果
修改之后
欢迎扫码关注微信公众号
更多推荐
所有评论(0)