vant组件修改样式变量

image.png

“确认”文字需要改成蓝色，这是样式变量控制的，可以在页面使用/deep/穿透来改，但是为了使代码美观遵守规则，通过改样式变量实现更好~~

picker组件的样式变量，如下图：

picker样式变量.png

1.main.js引入样式原文件

// 引入全部样式
import 'vant/lib/index.less';
// 引入单个组件样式
import 'vant/lib/button/style/less';

2.创建less文件

一般放在src/assets/less路径下，如下图

less文件.png

3.修改配置文件

找到你的vue.config.js文件，没有就在package.json同级新建一个配置文件，加下图代码：

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}";`
                }
            },
        }
    },
}

__dirname不需要替换成什么，直接复制。

4.修改样式

修改样式.png

开始不加important，优先级不够，加了important就正常显示了。

确定文字改蓝.png

完成撒花✿✿ヽ(°▽°)ノ✿

参考：
https://blog.csdn.net/weixin_48774523/article/details/111770822
https://www.jb51.net/article/208868.htm