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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本来我以为主题配置应该很简单,按照vant官网上面的来不就完事了。可是我自己试着做的时候并不是一番风顺的。过程可谓...
    一命迪卢克阅读 4,968评论 0 1
  • Vue.js Vue.js是什么? Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架(Angular2...
    Terminally_aa0f阅读 4,028评论 0 1
  • Express 基于Node.js 平台,快速、开放、极简的 web 开发框架。 Express使用文档 新建项目...
    阿鲁提尔阅读 5,526评论 1 3
  • 安装前先npm初始化 本地服务 复制html 处理css 处理less 抽离css文件,通过link引入 压缩cs...
    陈观齐阅读 3,959评论 0 0
  • 表情是什么,我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了,难过就哭了。两者是相互影响密不可...
    Persistenc_6aea阅读 127,134评论 2 7