如何调整Vant组件的Less变量以实现长尾词风格的效果？

本文共计737个文字，预计阅读时间需要3分钟。

目录- 修改vant的less变量- 修改vant组件的样式 - 例如：在app的样式中加入 - 效果如图- 后面精灵机一动，又想到了一个新的方法- 加了一个btn的类名：提高权限，限制样式条件- 修改vant的l样式

目录

• 修改vant的less样式变量
• vant组件的样式修改
• 例如
• 可以在app的样式中加入
• 效果如图
• 后面灵机一动,又想到了一个新的方法
• 加了一个btn 的类名：提高权限，限制样式条件

修改vant的less样式变量

引入全局css

import ‘vant/lib/index.css';

引入单个组件样式

import ‘vant/lib/toast/style/less';

新建一个less文件，用于修改vant的less变量

如conver_vant.less,在里面修改变量

//toast @toast-background-color:blue; @action-sheet-max-height:80%!important;

在vue.config.js里按照官方提示配置

这里注意要使用绝对路径，并且@import 后面记得跟双引号""。