标签：int 压缩 z-index roi ios tao 就会 comm set
webpack使用postcss的autoprefixer插件，并在压缩css时使用了cssnano，处理不当的情况下会导致压缩css后，部分兼容前缀（比如-webkit-）被删除的问题。
postcss的autoprefixer配置如下：
autoprefixer({ browsers: [‘> 1%‘, ‘iOS >= 7‘,"ie >= 7", ‘Android >= 2.4‘] })
css压缩的配置如下：
//压缩css代码 new OptimizeCssAssetsPlugin({ assetNameRegExp: /\.css\.*(?!.*map)/g, //注意不要写成 /\.css$/g cssProcessor: require(‘cssnano‘), cssProcessorOptions: { discardComments: {removeAll: true }, // 避免 cssnano 重新计算 z-index safe: true }, canPrint: true })
通过查阅资料发现，如果你使用的是webpack1.x版本，UglifyJsPlugin这个插件开启了minimize，导致css-loader也开启了压缩，然后css-loader会使用cssnano进行压缩，而cssnano会使用到autoprefixer进行无关前缀的清理。所以可以通过给css-loader添加-autoprefixer参数来告诉css-loader关闭掉autoprefixer这个功能，不要强制删除某些你觉得不重要的前缀。
{test: /\.less$/, loader: ‘style-loader!css-loader?minimize&-autoprefixer!postcss-loader!less-loader‘},
而上述原因已经在webpack2.x修复，webpack2的UglifyJsPlugin插件去掉了强制开启minimize。
然而如果你不是使用的webpack1.x，通过排查发现，在css压缩插件未使用的时候，兼容前缀正常，一旦使用了OptimizeCssAssetsPlugin来压缩css就会丢失部分的webkit前缀。
上面有提到，cssnano会使用autoprefixer自动清除掉一些他认为不重要的前缀。而OptimizeCssAssetsPlugin中默认了是使用cssnano。所以我们主动关闭cssnano的autoprefixer功能即可，因为我们已经在postcss中使用了autoprefixer插件，这里无需重复使用。
解决方法如下：
//压缩css代码 new OptimizeCssAssetsPlugin({ assetNameRegExp: /\.css\.*(?!.*map)/g, //注意不要写成 /\.css$/g cssProcessor: require(‘cssnano‘), cssProcessorOptions: { discardComments: {removeAll: true }, // 避免 cssnano 重新计算 z-index safe: true, //cssnano通过移除注释、空白、重复规则、过时的浏览器前缀以及做出其他的优化来工作，一般能减少至少 50% 的大小 //cssnano 集成了autoprefixer的功能。会使用到autoprefixer进行无关前缀的清理。默认不兼容ios8，会去掉部分webkit前缀，比如flex //所以这里选择关闭，使用postcss的autoprefixer功能 autoprefixer: false }, canPrint: true })
再次编译发现压缩状态时也带有全部的兼容前缀，ios8的不兼容问题即也解决。
参考：
http://www.css88.com/archives/7317
https://github.com/ShowJoy-com/showjoy-blog/issues/31
https://www.w3cplus.com/css/taobao-2018-year.html
标签：int 压缩 z-index roi ios tao 就会 comm set
原文地址：https://www.cnblogs.com/saysmy/p/9021598.html
