怎么在css3打包后自动追加前缀插件:autoprefixer

发布时间:2021-05-24 10:42:43 作者:小新
来源:亿速云 阅读:232

小编给大家分享一下怎么在css3打包后自动追加前缀插件:autoprefixer ,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了,自己不需要做什么改动就会自动加前缀:

怎么在css3打包后自动追加前缀插件:autoprefixer

下面一起看看涉及到autoprefixer这个插件的一些配置:

1,postcss配置写在.postcssrc.js,

怎么在css3打包后自动追加前缀插件:autoprefixer

2,浏览器规则则写在package.json上,

怎么在css3打包后自动追加前缀插件:autoprefixer

3,开发环境(build/webpack.dev.conf.js)样式相关的loader

怎么在css3打包后自动追加前缀插件:autoprefixer

4,生产环境(build/webpack.prod.conf.js)样式相关的loader

怎么在css3打包后自动追加前缀插件:autoprefixer

上述的配置设置不需要自己配置,cli脚手架环境搭建的时候已经配置好了。

vue-cli的开发环境和生产环境都是使用了postcss的,并且配置是一样的

这里有一个问题,网上有博主说项目打包前和打包后的css前缀不一致:

--给app.vue下的img添加样式

img{
 display: flex;
 transform: translateX(200px)
}

--打包前(即开发环境)img的样式

怎么在css3打包后自动追加前缀插件:autoprefixer

--打包后(即生产环境)img的样式

怎么在css3打包后自动追加前缀插件:autoprefixer

根据上面可看出打包前和打包后元素所带的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处理插件的,如下

怎么在css3打包后自动追加前缀插件:autoprefixer

ExtractTextPlugin这是提取分离css文件,不会影响css前缀,排除,那么问题就锁定到OptimizeCSSPlugin插件身上。再进一步,当我们把OptimizeCSSPlugin插件注释掉,然后打包测试,居然发现这时开发环境和生产环境的css前缀一致了,就是它了!!!

我们打开到npm官网搜一下这家伙

https://www.npmjs.com/package/optimize-css-assets-webpack-plugin

这是一个优化压缩css代码的插件,但很失望,文档说明很少

但我们注意到有一句话很关键:

怎么在css3打包后自动追加前缀插件:autoprefixer

这货里面依赖了cssnano,这插件也是用来优化处理css格式、前缀什么的。同时也有个autoprefixer配置参数,直接到它官网 https://cssnano.co/ 找到autoprefixer:

怎么在css3打包后自动追加前缀插件:autoprefixer

这里的翻译是:根据browsers选项删除不必要的前缀。请注意,默认情况下,它不会向CSS文件添加新前缀,这就可以解析清除我们的问题了,原来这插件的autoprefixer(默认应该是为true)把它认为不必要的前缀删掉了,而postcss的autoprefixer是将我们设定的浏览器范围的前缀加上,因此完美冲突了

解决问题

在build/webpack.prod.conf.js文件中OptimizeCSSPlugin插件的属性cssProcessorOptions加上autoprefixer:false来禁用它,避免冲突

怎么在css3打包后自动追加前缀插件:autoprefixer

上代码:

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
   ? { safe: true, map: false,autoprefixer:false }
   : { safe: true, autoprefixer: false}
 }),

以上是“怎么在css3打包后自动追加前缀插件:autoprefixer ”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. HBuilder中配置Autoprefixer的方法
  2. gulp 插件之 gulp-autoprefixer

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:怎么在一个千万级的数据库查询中提高查询的效率

下一篇:Ajax的content-download时间过慢怎么办

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》