vant定制主题源码详解 Vant 定制主题

介绍

Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法。

示例工程

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

样式变量

Vant 使用了 Less 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。

下面是一些基本的样式变量，所有可用的颜色变量请参考 配置文件。

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

定制方法

步骤一 引入样式源文件

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

按需引入样式（推荐）

在 babel.config.js 中配置按需引入样式源文件，注意 babel6 不支持按需引入样式，请手动引入样式

module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        // 指定样式路径
        style: name => `${name}/style/less`
      },
      "vant"
    ]
  ]
};

手动引入样式

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

// 引入单个组件样式
import "vant/lib/button/style/less";

步骤二 修改样式变量

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

// webpack.config.js
module.exports = {
  rules: [
    {
      test: /.less$/,
      use: [
        // ...其他 loader 配置
        {
          loader: "less-loader",
          options: {
            modifyVars: {
              // 直接覆盖变量
              "text-color": "#111",
              "border-color": "#eee"
              // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
              "hack": `true; @import "your-less-file-path.less";`
            }
          }
        }
      ]
    }
  ]
};