Vant 主题色配置 vue-cli搭建的项目

自定义Vant主题色

定制主题：官方配置

1.本地新建基础样式文件 vant.less

image.png

可重新配置颜色变量,更多变量名可查看配置文件

// Component Colors
@text-color: #323233;
@border-color: #ebedf0;
@active-color: #f2f3f5;
@background-color: #f7f8fa;
@background-color-light: #fafafa;

2.安装less

npm install less less-loader --save-dev

3.main.js引入less文件

image.png

// 引入全部样式
import 'vant/lib/index.less';

这里是引入全部样式，因为我是导入全部组件的，如果按照官方配置按需引入会报错‘Vant is not defined’

4.vue.config.js 中进行配置

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

注意：如果没有效果，请移除 lessOptions 这一级，直接配置选项