Vant3 定制主題

定制主題

廢棄提示

本文檔已廢棄，Vant 提供了更方便的 ConfigProvider 全局配置 組件進行主題配置?；?Less 變量進行定制的方式將在下個大版本廢棄。

介紹

Vant 提供了一套默認主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。如果你想完全替換主題色或者其他樣式，可以按照本文檔進行主題定制。

示例工程

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

樣式變量

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

下面是所有的基礎樣式變量，組件的樣式變量請參考各個組件的文檔，或查看組件源碼目錄下的 var.less 文件。

// Color Palette
@black: #000;
@white: #fff;
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;
@red: #ee0a24;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;

// Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

// Component Colors
@text-color: @gray-8;
@active-color: @gray-2;
@active-opacity: 0.7;
@disabled-opacity: 0.5;
@background-color: @gray-1;
@background-color-light: #fafafa;
@text-link-color: #576b95;

// Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;

// Font
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-bold: 500;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
  Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
  'Microsoft Yahei', sans-serif;
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
  sans-serif;

// Animation
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;

// Border
@border-color: @gray-3;
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;

定制方法

步驟一 引入樣式源文件

定制主題時，需要引入組件對應的 Less 樣式文件，支持按需引入和手動引入兩種方式。

按需引入樣式（推薦）

在 babel.config.js 中配置按需引入樣式源文件，注意 babel 6 不支持按需引入樣式，請手動引入樣式。

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

Vite 項目

如果是 vite 項目，可以跳過以上步驟，直接在 vite.config.js 中添加如下配置即可。

// vite.config.js
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';

export default {
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        // 覆蓋樣式變量
        modifyVars: {
          'text-color': '#111',
          'border-color': '#eee',
        },
      },
    },
  },
  resolve: {
    alias: [{ find: /^~/, replacement: '' }],
  },
  plugins: [
    vue(),
    // 按需引入樣式源文件
    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style/less`,
        },
      ],
    }),
  ],
};