css3打包后自动追加前缀插件:autoprefixer
用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了,自己不需要做什么改动就会自动加前缀:
下面一起看看涉及到autoprefixer这个插件的一些配置:
1,postcss配置写在.postcssrc.js,
2,浏览器规则则写在package.json上,
3,开发环境(build/webpack.dev.conf.js)样式相关的loader
4,生产环境(build/webpack.prod.conf.js)样式相关的loader
上述的配置设置不需要自己配置,cli脚手架环境搭建的时候已经配置好了。
vue-cli的开发环境和生产环境都是使用了postcss的,并且配置是一样的
这里有一个问题,网上有博主说项目打包前和打包后的css前缀不一致:
--给app.vue下的img添加样式
img{
display: flex;
transform: translateX(200px)
}
--打包前(即开发环境)img的样式
--打包后(即生产环境)img的样式
根据上面可看出打包前和打包后元素所带的css前缀不一致了。
然后给出的解决方案:
从上面可以看出,vue-cli的开发环境和生产环境都是使用了postcss的,并且配置是一样的,那么为什么打包前和打包后元素所带的css前缀不一致呢,
锁定问题
我们可以分析对比下build/webpack.dev.conf.js和build/webpack.prod.conf.js这两个文件,影响css的无非就module里处理样式的loader和处理css的插件plugin,从上面可以看出影响前缀的postcss的loader在两个环节中是一致的,那么就可以知道问题出在处理css的插件上了。
经过排查发现,webpack.prod.conf.js配置里是多了两个css处理插件的,如下
ExtractTextPlugin这是提取分离css文件,不会影响css前缀,排除,那么问题就锁定到OptimizeCSSPlugin插件身上。再进一步,当我们把OptimizeCSSPlugin插件注释掉,然后打包测试,居然发现这时开发环境和生产环境的css前缀一致了,就是它了!!!
我们打开到npm官网搜一下这家伙
https://www.npmjs.com/package/optimize-css-assets-webpack-plugin
这是一个优化压缩css代码的插件,但很失望,文档说明很少
但我们注意到有一句话很关键:
这货里面依赖了cssnano,这插件也是用来优化处理css格式、前缀什么的。同时也有个autoprefixer配置参数,直接到它官网 https://cssnano.co/ 找到autoprefixer:
这里的翻译是:根据browsers选项删除不必要的前缀。请注意,默认情况下,它不会向CSS文件添加新前缀,这就可以解析清除我们的问题了,原来这插件的autoprefixer(默认应该是为true)把它认为不必要的前缀删掉了,而postcss的autoprefixer是将我们设定的浏览器范围的前缀加上,因此完美冲突了
解决问题
在build/webpack.prod.conf.js文件中OptimizeCSSPlugin插件的属性cssProcessorOptions加上autoprefixer:false来禁用它,避免冲突
上代码:
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: false,autoprefixer:false }
: { safe: true, autoprefixer: false}
}),
结论
最后,看看我们dev和build出来的css前缀,应该就一致的了:
问题原因就是:OptimizeCSSPlugin里面依赖了cssnano,而cssnano里面也有一个autoprefixer配置参数,它的作用是删除不必要的前缀(会误删在某些浏览器必要的前缀),这与postcss的autoprefixer效果冲突了,因此禁用它。现在打包出来的与我们设定的浏览器范围对应的前缀一致
按照网上的博主的配置确实可以把开发环境和测试环境的前缀一模一样,但是看了下没有必要,问题的前提不是前缀不一致,那个配置只是把和当前浏览器不匹配的前缀不显示出来而已,样式还都是生效的,个人觉得如果不是特别大的问题不用改配置。
css3打包后自动追加前缀插件:autoprefixer的更多相关文章
- Xcode: Run Script 的运用, 使build打包后自动+1
背景: 每次打包都要build+1处理,比较麻烦,使用 Run Script 的运用使build打包后自动+1 0. 使用xcode 添加run Script 然后就可以添加Run Script了 1 ...
- 用Emmet写CSS3属性会自动添加前缀
CSS3的很多属性都包含浏览器厂商前缀,用Emmet写CSS3属性会自动添加前缀,比如输入trs 会展开为: -webkit-transition: prop time; -moz-transitio ...
- sublime 自动添加兼容前缀插件autoprefixer
安装插件autoprefixer步骤: 1.确保Node.js已经安装,未安装请 点击 这里>> 2.下载autoprefixer插件 https://github.com/sindres ...
- vue -- vue-cli webpack项目打包后自动压缩成zip文件
用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...
- vue.js - 解决vue-cli打包后自动压缩代码
一.webpack中引入的压缩代码 /build/webpack.prod.conf.js const OptimizeCSSPlugin = require('optimize-css-assets ...
- 介绍一款自动给添加不同浏览器CSS3前缀的插件~Autoprefixer(附其他前端开发插件)
正文 自动给CSS文件添加不同浏览器的CSS3前缀:Autoprefixer 安装 只需兼容主流浏览器 正常情况使用:(在书写完的CSS样式文件中,按F1,选择Autoprefixer CSS) 这时 ...
- Dynamics 365检查工作流、SDK插件步骤是否选中运行成功后自动删除系统作业记录
本人微信公众号:微软动态CRM专家罗勇 ,回复298或者20190120可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 系统 ...
- vue打包时,assets目录 和static目录下文件的处理区别(nodeModule中插件源码修改后,打包后的文件应放在static目录)
为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL.例如 ...
- webpack快速入门——打包后如何调试
在配置devtool时,webpack给我们提供了四种选项. source-map:在一个单独文件中产生一个完整且功能完全的文件.这个文件具有最好的source map,但是它会减慢打包速度: che ...
随机推荐
- ghj1222被坑记录[不持续更新]
考试注意事项:link1 link2 (密码:wangle) 调不出来bug,可以先透彻一会儿或者是上个厕所或者坐一会别的题(间隔至少20min),然后通读代码 -1. 考试先读题,读题之后搞出一个做 ...
- NavigatorIOS
使用 NavigatorIOS,我们需要给他指定一个路由,这样它才能知道显示哪个页面 实例化 Navigator 需要2个必要的属性 —— initialRoute 和 renderSence,它们的 ...
- spring IOC的实现原理
姓名:陈中娇 班级:软件151 1. IOC容器就是具有依赖注入功能的容器,IOC容器负责实例化.定位.配置应用程序中的对象及建立这些对象间的依赖.应用程序无需直接在代码中new相关的对象,应 ...
- springcloud(一)-初识
springCloud简介 尽管springCloud带有“cloud”字样,但它并不是云计算解决方案,而是在SpringBoot基础上构建的,用于快速构建分布式系统的通用的工具集.从技术架构上降低了 ...
- hdu1495 bfs搜索、模拟
大家一定觉的运动以后喝可乐是一件很惬意的事情,但是seeyou却不这么认为.因为每次当seeyou买了可乐以后,阿牛就要求和seeyou一起分享这一瓶可乐,而且一定要喝的和seeyou一样多.但see ...
- appium关于当前网络情况测试,实现打开关闭网络(python3.4版)
appium关于当前网络情况测试,实现打开关闭网络(不需要root测试机) # python from appium.webdriver.connectiontype import Connectio ...
- http-https php文件下载
http: function httpDownload($url, $path = '', $filename = '', $timeout = 60,$type = 0) { if ($url == ...
- EC2 Instance扩容EBS卷容量
EC2实例运行一段时间后,由于日志和一些应用程序数据的积累,可能出现之前预留的磁盘容量不够需要扩容的情况.AWS EBS目前还不支持在线扩容,不过可以通过结合snapshot来实现. 如,我的EC2 ...
- android LinearLayoutForListView
由于 scrollview 套 listview 会有很多问题,网上很多人用 LinearLayout 模拟 listview, 也可以设置 adapter. 很多人直接继承 BaseAdapter, ...
- java.lang.RuntimeException: HRegionServer Aborted的问题
进程情况 [hadoop@hadoop1 hbase]$ jps QuorumPeerMain ResourceManager HMaster NameNode JournalNode HRegion ...