用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的更多相关文章

  1. Xcode: Run Script 的运用, 使build打包后自动+1

    背景: 每次打包都要build+1处理,比较麻烦,使用 Run Script 的运用使build打包后自动+1 0. 使用xcode 添加run Script 然后就可以添加Run Script了 1 ...

  2. 用Emmet写CSS3属性会自动添加前缀

    CSS3的很多属性都包含浏览器厂商前缀,用Emmet写CSS3属性会自动添加前缀,比如输入trs 会展开为: -webkit-transition: prop time; -moz-transitio ...

  3. sublime 自动添加兼容前缀插件autoprefixer

    安装插件autoprefixer步骤: 1.确保Node.js已经安装,未安装请 点击 这里>> 2.下载autoprefixer插件 https://github.com/sindres ...

  4. vue -- vue-cli webpack项目打包后自动压缩成zip文件

    用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...

  5. vue.js - 解决vue-cli打包后自动压缩代码

    一.webpack中引入的压缩代码 /build/webpack.prod.conf.js const OptimizeCSSPlugin = require('optimize-css-assets ...

  6. 介绍一款自动给添加不同浏览器CSS3前缀的插件~Autoprefixer(附其他前端开发插件)

    正文 自动给CSS文件添加不同浏览器的CSS3前缀:Autoprefixer 安装 只需兼容主流浏览器 正常情况使用:(在书写完的CSS样式文件中,按F1,选择Autoprefixer CSS) 这时 ...

  7. Dynamics 365检查工作流、SDK插件步骤是否选中运行成功后自动删除系统作业记录

    本人微信公众号:微软动态CRM专家罗勇 ,回复298或者20190120可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 系统 ...

  8. vue打包时,assets目录 和static目录下文件的处理区别(nodeModule中插件源码修改后,打包后的文件应放在static目录)

    为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL.例如 ...

  9. webpack快速入门——打包后如何调试

    在配置devtool时,webpack给我们提供了四种选项. source-map:在一个单独文件中产生一个完整且功能完全的文件.这个文件具有最好的source map,但是它会减慢打包速度: che ...

随机推荐

  1. Mac 更改/usr/bin 目录权限失败

    对于Mac OS X 10.11 El Capitan用户,由于系统启用了SIP(System Integrity Protection), 导致root用户也没有权限修改/usr/bin目录.按如下 ...

  2. linux下获取系统时间 和 时间偏移

    获取linux时间  并计算时间偏移 void getSystemTimer(void){#if 0 char *wdate[]={"Sun","Mon",&q ...

  3. 街机模拟.samsho2

    1.sdyrugal https://www.douyu.com/599516 2.红中哥:西瓜视频  搜索 "红中哥游戏解说" 我搜索到的地址:https://live.ixig ...

  4. SQL基础语法select|insert|update|delete(增删改查) 简单使用

    以下案列以此表举例 1.select(查询) select简单的查询分为两种 注:字段也就是表结构中的列的名称 第一种: select  字段名  from  表名 此种查询只列出你所需要查询的字段, ...

  5. for、while、do while 3种循环异同点

    for (; ; ){ 循环体} while(循环条件){ 循环体} do{ 循环体}while(循环条件); 执行顺序不同: for循环和while循环:先判断条件为true时,然后再执行 do w ...

  6. Android中调用高德导航(组件)

    btn_.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //调用 ...

  7. JQ 输入框控制输入 - 键盘上事件

    <li style="width: 480px">限购数量  <input type="number" name="limitNum ...

  8. HTTPS和SSL详解

    这是转载别人的(转:崔永秀) 把这几天学习到的关于ssl和https协议的内容在这里分享一下,适合一些像我一样的网络协议初学者. ssl协议的起源和历史我就不再多说了,就是那个Netscape 网景公 ...

  9. nginx配置服务器负载均衡

    upstream servers { ip_hash; #hash,ip轮训 server localhost:8400; } server { listen 80; server_name loca ...

  10. VS2008默认的字体居然是 新宋体

    本人还是觉得 C#就是要这样看着舒服