vant-ui 如何定制主题

vue cli3.0版本的

第一步

在main.js引入node/moudule文件夹下 vant/lib/index.less文件。

import 'vant/lib/index.less';

第二步

安装less

npm install less less-loader --save-dev

第三步

创建要覆盖的配置文件less,比如：resetVantStyle.less

第四步

引入resetVantStyle.less

打开vue.config.js文件，找到如下图：

${path.join(__dirname,‘自己的less文件所在位置’)}是获取绝对路径

第五步

也是最容易忽略的一步：

我们需要对babel.config.js文件做一些修改：

最后重新运行项目，如果发现报错Syntax Error: TypeError: this.getOptions is not a function，是因为less-loader安装的版本太高，卸载重新安装7.0版本即可。

// 卸载

npm uninstall --save less-loader

// 安装

npm install -D less-loader@7.x