使用Vant定制主题

主题"/>

使用Vant定制主题

Vant定制主题的核心原理

Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。

定制方法

定制主题时，需要引入组件对应的 Less 样式文件，支持按需引入和手动引入两种方式。

1.引入样式源文件

main.js里面

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

2.修改样式变量

使用 Less 提供的 modifyVars 即可对变量进行修改，下面是参考的 webpack 配置。（自己手动搭建的webpack）

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

如果 vue-cli 搭建的项目，可以在 vue.config.js 中进行配置。
//配置vue,config.js文件(与src目录同级)
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象：

// vue.config.js/*** @type {import('@vue/cli-service').ProjectOptions}*/
module.exports = {// 选项...
}

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

less(可编程式语言)的正确打开方式

变量（Variables）
无需多说，看代码一目了然：

@width: 10px;
@height: @width + 10px;#header {width: @width;height: @height;
}

编译为

#header {width: 10px;height: 20px;
}

推荐使用theme.less定制主题

修改服务器需重新打包，所以不建议在服务器中修改。
在src目录下 创建theme.less文件
举例：

// 在 theme.less 文件中，覆盖 Vant 官方的 less 变量值
@blue: #007bff;// 覆盖 Navbar 的 less 样式
@nav-bar-background-color: @blue;
@nav-bar-title-text-color: #fff;

使用：

// 这个文件是 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}";`}}}}
}