Vant 定制主題

介紹

Vant 提供了一套默認主題，CSS 命名采用 BEM 的風(fēng)格，方便使用者覆蓋樣式。如果你想完全替換主題色或者其他樣式，可以使用下面提供的方法。

示例工程

我們提供了一個基于 Vue Cli 3 的示例工程，倉庫地址為 Vant Demo，其中包含了定制主題的基本配置，可以作為參考。

樣式變量

Vant 使用了 Less 對樣式進行預(yù)處理，并內(nèi)置了一些樣式變量，通過替換樣式變量即可定制你自己需要的主題。

下面是一些基本的樣式變量，所有可用的顏色變量請參考 配置文件。

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

定制方法

步驟一 引入樣式源文件

定制主題時，需要引入組件對應(yīng)的 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";`
            }
          }
        }
      ]
    }
  ]
};