Vant 自定义样式变量配置 Better

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