Vant定制主题

简介

Vant是一个便捷、好用的移动端组件库，你可以通过它快速的搭建移动端网页。组件中提供了大量的属性供我们自定义编辑，但也有一些常用属性组件中并未提供，比如 NavBar导航栏 的背景色。想要修改它我们有两种方案，第一种是 检查元素 ，找到对应的类名，修改相关属性即可。第二种是 定制主题 ，下面详细介绍该方案。

定制主题

介绍

Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。
Vant 使用了 Less 对样式进行预处理，并内置了一些样式变量，通过 替换样式变量 即可定制你自己需要的主题。

第一步，更改导入的样式文件

根据文档介绍，一般都是这样导入样式文件的：

// main.js
import 'vant/lib/index.css';

平时导入的都是上面的 css 样式文件，这里我们需要通过更改 Less 变量来修改样式，因此需要导入 less 样式文件：

// main.js
import 'vant/lib/index.less';

第二步，修改样式变量

有 webpack 和 vue-cli 两种配置方式，想了解 webpack 相关的可前往官网，此处仅介绍 vue-cli 的配置方式。
打开 vue.config.js 文件，如果没有则在项目根目录新建该文件，然后在文件中配置如下代码：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
          	// 此处修改样式
            // 直接覆盖变量或者通过 less 文件覆盖
          },
        },
      },
    },
  },
};

注意：如果你的 less-loader 版本小于6.0，就移除 lessOptions 这一级，直接配置 modifyVars 这一级

如上图，此处版本为5.0，则配置代码如下：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
         modifyVars: {
           // 直接覆盖变量，修改NavBar背景颜色为红色
           'nav-bar-background-color': 'red',
           'nav-bar-text-color': 'white'
         },
      },
    },
  },
};

上面代码通过 直接覆盖变量 的方式，修改了NavBar的背景颜色和文本颜色：

注意：vue.config.js 为配置文件，修改后需要重启项目才能生效

除了 直接覆盖变量 的方式，还有 通过 less 文件覆盖 的方式：

// vue.config.js
// 导入path模块
const path = require('path')
// 拼接主题的绝对路径
const themePath = path.join(__dirname, './src/theme.less')

module.exports = {
  css: {
    loaderOptions: {
      less: {
         modifyVars: {
			// 可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "${themePath}";`,
         },
      },
    },
  },
};

在项目根目录新建主题样式文件 theme.less ：

// theme.less
// Vant主题, 覆盖官方的 less 变量值

// Navbar
@nav-bar-background-color: #007bff;
@nav-bar-icon-color: #fff;
@nav-bar-text-color: #fff;
@nav-bar-title-text-color: #fff;

此时就可以根据需要修改样式了，可以参考组件文档查询相关变量，以下为NavBar样式变量：

注意：通过 less 文件修改样式无需重启项目

Vant 3

在Vant 3中定制主题已经 废弃 ，Vant 提供了更方便的 ConfigProvider 全局配置 组件进行主题配置，有需要的可前往官网。