vue2+Vant 定制主题

参考文档：Vant主题定制-CSDV博客
vant提供了一套默认主题，若想完全替换主题是或者其他样式，则需要定制主题。

定制方法

1、main.js文件引入主题样式源文件

// 导入并安装 Vant 组件库
import Vant from 'vant'
// 切记：为了能够覆盖默认的 less 变量，这里一定要把后缀名改为 .less
import 'vant/lib/index.less'

2、自定义样式变量

推荐使用theme.less定制主题

在src目录下创建theme.less文件，在theme.less文件中，自行修改变量值覆盖vant官方的变量值

// 这个文件是 vue-cli 创建出来的项目的配置文件
// 在 vue.config.js 这个配置文件中，可以对整个项目的打包、构建进行全局性的配置// webpack 在进行打包的时候，底层用到了 node.js
// 因此,在 vue.config.js 配置文件中，可以导入并使用 node.js 中的核心模块
const path = require('path')
const themePath = path.join(__dirname, './src/theme.less')module.exports = {publicPath: './',css: {loaderOptions: {less: {modifyVars: {// 直接覆盖变量// 'nav-bar-background-color': 'orange',// 或者可以通过 less 文件覆盖（文件路径为绝对路径）//  ../    ./    theme.less// 从盘符开始的路径，叫做绝对路径   C:\\Users\liulongbin\\theme.lesshack: `true; @import "${themePath}";`}}}}
}