Vant - 自定義樣式變量配置

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

1. 安裝 less-loader

npm install less less-loader@5.0.0 --save-dev

// 安裝最新的 less-loader會報錯，這里指定了版本5.0.0

2. 引入樣式文件

方法一：手動引入

// 引入全部樣式
import 'vant/lib/index.less';

// 引入單個組件樣式
import 'vant/lib/button/style/less';

方法二：按需引入

// babel.config.js
// 注意 babel6 不支持按需引入樣式，請手動引入樣式
module.exports = {
plugins: [
  [
    'import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      // 指定樣式路徑
      style: (name) => `${name}/style/less`,
    },
    'vant',
  ],
],
};

3. 新建樣式變量文件

在項目style文件相關的目錄下，新建 vantChange.less，用於重新定義樣式變量。

// vantChange.less
// Steps
@step-active-color: #20b26c;
@step-icon-size: .22rem;
@step-font-size: .16rem;
@steps-background-color: #390ee7;

// Circle
@circle-text-font-size: .2rem;

4. 配置樣式變量

如果 vue-cli 搭建的項目，可以在 vue.config.js 中進行配置。
webpack 配置，參考 5. 參考資料 部分。

// vue.config.js
const path = require('path')
const customVant = path.resolve(__dirname, "./src/assets/styles/vantChange.less");
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小於 6.0，請移除 lessOptions 這一級，直接配置選項。
        lessOptions: {
          modifyVars: {
            // 直接覆蓋變量
            'text-color': '#111',
            'border-color': '#eee',
            // 或者可以通過 less 文件覆蓋（文件路徑為絕對路徑）
            hack: `true; @import "${customVant}";`,
          },
        },
      },
    },
  },
};

5.參考資料

https://youzan.github.io/vant/v2/#/zh-CN/theme#bu-zou-er-xiu-gai-yang-shi-bian-liang