vant按需引入_VueCli2 配置Vant主题

VueCli2 配置Vant主题

官网
VueCli2不支持按需引入，只能全部引入

安装依赖

npm install -D less@3 less-loader@5

"vant": "^2.9.0","less": "^3.0.4","less-loader": "^5.0.0",

更改.babelrc

{"plugins": [["import",{"libraryName": "vant","libraryDirectory": "es","style": true}]]
}

在main.js中引入vant的less文件

这里要注意一点Vant组件也要在这里全局引入，不然会导入多份样式，下图说明了这个问题

引入方式

import {NavBar, Col, Row, Popup, Picker, Switch} from 'vant';
Vue.use(NavBar).use(Col).use(Row).use(Popup).use(Picker).use(Switch);
import 'vant/lib/index.less';// 引入vant全部样式

创建自定义主题变量文件less

比如放在src/less/vant_theme.less

查看官方主题定义

可以根据官方定义的主题做响应修改

@white:white;
// NavBar
@nav-bar-background-color:#8022aa;
//@nav-bar-arrow-size: 16px;
@nav-bar-icon-color: @white;
@nav-bar-text-color: @white;
@nav-bar-title-text-color: @white;
//@nav-bar-z-index: 1;

修改配置文件中的build/utils.js代码

修改前

less: generateLoaders('less'),

修改后

less: generateLoaders('less', {modifyVars: {// '@white': '#5077aa;','hack': `true; @import "${path.join(__dirname, '../src/less/vant_theme.less')}";`}}),

vant按需引入_VueCli2 配置Vant主题相关推荐

vue中babel-plugin-component按需引入和element-ui 的主题定制，支持发布，上线
前言目前项目用的vue + element-ui,之前有了解过element-ui真正的按需引入,也有了解到主题定制,之前的项目都是根据element-ui的类及标签,在全局或者局部进行一大堆样式覆 ...
vant按需引入没样式_vue vant-ui样式出不来的问题
第一步:安装vant npm i vant -S // 或 yarn add vant 第二步:配置按需引入 // 在 babel.config.js 中配置 module.exports = {pl ...
vant部署_Vant引入及配置
1. vant 官网 2. 通 npm 安装 npm i vant -S 3.安装 babel-plugin-import 插件 babel-plugin-import 是一款 babel 插件,它会 ...
vant按需引入没样式_传统背景墙早看腻了，不如走一圈石膏线简单好看，8种样式随意选...
装修最忌讳的就是千篇一律,再好看的设计,也迟早会看腻味的.是时候告别传统电视墙做法,换成走一圈的石膏线,简单.省钱又好看.当然想要石膏线固定在墙面上不土,自然不能自己想怎么样就怎么样的,具体的做法我来 ...
vant UI 使用，按需引入
vant-uI官方文档 1.安装 npm i vite-plugin-style-import@1.4.1 -D //npm安装 yarn add vite-plugin-style-import@1 ...
element ui需要引入样式吗_彻底学会element-ui按需引入和纯净主题定制
原标题:彻底学会element-ui按需引入和纯净主题定制作者:wuwhs 来源:SegmentFault 思否社区前言手上有些项目用的element-ui,刚好有空琢磨一下怎么减小打包文件大小 ...
vant自动按需引入组件 (推荐)
vant自动按需引入组件 (推荐) 安装 # 通过 npm 安装 npm i vant -S babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法 ...
html页面如何按需导入vant,vue脚手架中使用Vant，实现自动按需引入组件，并将px转换为rem...
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
uniapp平台使用vant组件按需引入，并兼容到微信、百度、抖音小程序
uniapp平台使用vant组件按需引入,并兼容到微信.百度.抖音小程序请先了解vant在各小程序的兼容情况前置条件温馨提示兼容到百度swan自定义组件兼容到抖音tt自定义组件请先了解va ...

vant按需引入_VueCli2 配置Vant主题

VueCli2 配置Vant主题

安装依赖

更改.babelrc

在main.js中引入vant的less文件

创建自定义主题变量文件less

修改配置文件中的build/utils.js代码

vant按需引入_VueCli2 配置Vant主题相关推荐

最新文章

热门文章