Vant自定义主题色

前言

Vant官网的中文教程备注了less-loader版本<6,需要移除lessOptions，但是，英文教程却没有此备注。导致看英文教程的我，折腾了大半天，自定义变量始终未生效。
查看Vant的相关issue也没有提及版本问题，故写此文章，希望帮助看到的小伙伴避坑。

配置

脚手架：vue-cli3以上

第一步： 引入样式文件

1. 按需引入(babel.config.js )

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

2. 手动引入样式

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

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

第二步：修改样式变量 （vue.config.js）

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量(这里不需要@符号)
            'text-color': '#111',
            'border-color': '#eee',
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "your-less-file-path.less";`,
          },
        },
      },
    },
  },
};

注意点

• 变量重置未生效
  查看 less-loader 版本，若小于 6.0，请移除 lessOptions 这一级，直接配置选项。如下：

   css: {
        loaderOptions: {
            less: {
                   // 注意：这里没有lessOptions
                modifyVars: {
                    hack: `true; @import "${path.join(
                        __dirname,
                        './src/styles/theme.less'
                    )}";`
                },
            },
        },
    },

• 自定义主题色的路径加载

  
  
  image.png

解决方案： 使用绝对路径

modifyVars: {
                    // 重置vant的部分变量（如：主题色）
                    hack: `true; @import "${path.join(
                        __dirname,
                        './src/styles/theme.less'
                    )}";`
                },

参考文档

官网教程-自定义主题
vue@cli3中配置vant主题,引入主题文件时报错