vant 引进单个样式_记一次webpack打包样式加载问题

今天是周六.

我过来加班了.

是因为一个属性问题.

俗话说一杯茶一包烟一个bug改一天

感觉这句话就是特意为我准备的(我加班的时候喝奶茶,抽烟,而且就一个bug.哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或)

言归正传,说下webpack打包问题,刚到新工作和大佬们一起做ts + vue + vant的项目.(我之前不写ts,其实差不多,就是命名语法等问题)

我们一起撸代码,一直是在本地run serve的本地是一直没问题的,但是准备转测的时候,打包发现了问题(建议大家以后,定期打包一下代码,不然问题集中到最后是很坑的.)

问题:打包之后vant的样式一直没有按需加载(我们这个项目使用是按需引入vant这种方式来使用的.)

就是因为在vue.config.js中配置文件没有加上这个 parallel: false, .导致打包一直有问题.虽然不是很明白原理(网上看了资料也不是很清楚,好像是允许并行webpack项目,提高打包速度的插件...)

代码:

parallel: false,

如上图加上这个属性打包之后样式就会按需加载vant的css文件了.

以后应该没有人会遇到这个问题吧.毕竟我在网上搜了几天的资料都没看到过这类的问题,我就记录下来提醒自己吧,over!

em....顺便说下vant的按需引入和全局引入吧

全局引入:(在main.js中导入就好了/用ts的童鞋就是main.ts文件)

import Vue from 'vue'

import Vant from 'vant'

import 'vant/lib/index.css'

Vue.use(Vant)

别忘了Vue.use(Vant) 哦!

按需引入(看大家都是推荐使用的,我也推荐一下这种方法吧.)

// 1.安装npm install babel-plugin-import -D

// 2.在babelrc中配置

"plugins": [

"transform-vue-jsx",

"transform-runtime",

["import", [

{

"libraryName":"vant",

"style":true

}

]

import { Button } from 'vant'

Vue.use(Button) //或者下面的

@Component({

components: {

[Button.name]: Button,

//下面这些送你们的

[Icon.name]: Icon,

[NavBar.name]: NavBar,

[Actionsheet.name]: Actionsheet,

[SubmitBar.name]: SubmitBar,

[Cell.name]: Cell,

[Search.name]:

[CellGroup.name]: CellGroup,

[SwipeCell.name]: SwipeCell,

[Stepper.name]: Stepper,

[List.name]: List,

}

})

vant 引进单个样式_记一次webpack打包样式加载问题相关推荐

解决webpack打包样式url()背景图片问题
定位错误项目使用webpack4进行编译,打包后的样式中使用url方法指定的背景图片不能够正常显示源码戳这里 .bgurl{background-image: url('/images/abc.j ...
vant 引进单个样式_vue 公共列表选择组件,引用Vant-UI的样式方式
此组件用于公共选择组件.引用Vant UI 作为样式特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: 确认 v-model="l ...
javafx css样式_使用CSS设置JavaFX饼图样式
javafx css样式渲染图表时, JavaFX默认提供某些颜色. 但是,在某些情况下,您想自定义这些颜色. 在此博客文章中,我将使用一个示例来更改JavaFX饼图的颜色,该示例打算在今天下午在2 ...
异常信息配置文件已被另一个程序更改_抢先目睹：SpringBoot2.4配置文件加载机制大变化
翻译: 冷冷.如梦技术原文链接:spring.io/blog/2020/0- Spring Boot 2.4.0.M2 刚刚发布,它对 application.properties 和 applic ...
springboot 读取配置文件_使用 @ConfigurationProperties 在 Spring Boot 中加载配置
本文地址: 使用 @ConfigurationProperties 在 Spring Boot 中加载配置使用 Spring Boot 加载配置文件的配置非常便利,我们只需要使用一些注解配置一下就能 ...
echarts加载动画效果_入门ae教程：科技类的加载动画，非常酷炫的效果，附带教程...
效果图今天这个教程属于初学者的教程,很简单,但是科技类的加载动画,我个人觉得都是非常酷的(每天5分钟,充实一整天) 教程 1. 首先打开我们的AE 2. 新建一个合成,1080*660px,持续时间 ...
krpano 场景切换通知_一个基于Vulkan的异步场景加载设计
异步场景加载基本流程验证完成. 此方法理论上只需要使用3个Vulkan的指令队列. 对于移动平台上的Vulkan,指令队列数量极少,比如Adreno640只有3个指令队列可用.所以理论上这一设计也适合 ...
postman程序如何加载_如何使用Postman和AWS轻松加载测试无服务器应用程序
postman程序如何加载 When you mention load testing to a software engineer, nine times out of 10 you see a s ...
记一次CSDN的资源加载失败的问题的解决方法
前段时间,某天突然发现CSDN加载不了,我还以为网站出现故障了,但是没想到第二天还是访问不了,问了下同事,他的好像没有什么问题-- (大概长这样) 找到加载失败的url(大部分是CDN的图片和样式文件 ...

vant 引进单个样式_记一次webpack打包样式加载问题

vant 引进单个样式_记一次webpack打包样式加载问题相关推荐

最新文章

热门文章