vant定制主题样式

官网链接

效果图如下：

1.手动引入样式

引入全局样式（main.js） import 'vant/lib/index.less';

2.修改样式变量

vue.config.js 中进行配置（没有此文件的需创建一个，和package.json同级）

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量
            'text-color': '#111',
            'border-color': '#eee',
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "your-less-file-path.less";`,
          },
        },
      },
    },
  },
};

一共两种引入方式：

第一种(vue.config.js)如下图：

第二种：
首先在src目录下创建一个theme.less

踩过的坑，给属性值添加了引号，也不报错，样式不生效

其次在vue.config.js中进行配置如下代码（每次修改后不需要重启项目）

推荐使用第二种，无需重启项目，替换主题方便快捷