定制主题

介绍

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

我们提供了一个基于 Vue CLI 3 的示例工程，仓库地址为 ，其中包含了定制主题的基本配置，可以作为参考。

样式变量

下面是所有的，组件的样式变量请参考各个组件的文档，或查看组件源码目录下的 文件。

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

按需引入样式（推荐）

  1. module.exports = {
  2.   plugins: [
  3.     [
  4.       'import',
  5.       {
  6.         libraryName: 'vant',
  7.         libraryDirectory: 'es',
  8.         // 指定样式路径
  9.         style: (name) => `${name}/style/less`,
  10.       },
  11.       'vant',
  12.     ],
  13.   ],
  14. };

手动引入样式

步骤二 修改样式变量

使用 Less 提供的 即可对变量进行修改，下面是参考的 webpack 配置。

  1. // webpack.config.js
  2. module.exports = {
  3.   rules: [
  4.       test: /\.less$/,
  5.       use: [
  6.         // ...其他 loader 配置
  7.         {
  8.           loader: 'less-loader',
  9.           options: {
  11.             lessOptions: {
  12.               modifyVars: {
  13.                 // 直接覆盖变量
  14.                 'text-color': '#111',
  15.                 'border-color': '#eee',
  16.                 // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
  17.                 hack: `true; @import "your-less-file-path.less";`,
  18.               },
  19.             },
  20.           },
  21.         },
  22.       ],
  23.     },
  24.   ],
  25. };

如果 vue-cli 搭建的项目，可以在 vue.config.js 中进行配置。

  1. // vite.config.js
  2. import vue from '@vitejs/plugin-vue';
  3. import styleImport from 'vite-plugin-style-import';
  5. export default {
  6.     preprocessorOptions: {
  8.         javascriptEnabled: true,
  9.         // 覆盖样式变量
  10.         modifyVars: {
  11.           'text-color': '#111',
  12.           'border-color': '#eee',
  13.         },
  14.       },
  15.     },
  16.   },
  17.   resolve: {
  18.     alias: [{ find: /^~/, replacement: '' }],
  19.   },
  20.   plugins: [
  21.     vue(),
  22.     // 按需引入样式源文件
  23.     styleImport({
  24.       libs: [
  25.         {
  26.           libraryName: 'vant',
  27.           esModule: true,
  28.           resolveStyle: (name) => `vant/es/${name}/style/less`,
  29.         },
  30.       ],
  31.     }),