webpack开发环境和产品编译环境编译css不同

[cycold]

webpack开发环境css属性: -webkit-box-orient: vertical; webpack生产环境(css编译后), 此属性被优化掉了.

原因: webpack生产编译优化css插件导致: const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

https://github.com/NMFR/optimize-css-assets-webpack-plugin

默认使用https://github.com/ben-eb/cssnano进行css压缩

cssnano根据 https://github.com/ai/browserslist 进行优化

https://github.com/NMFR/optimize-css-assets-webpack-plugin/issues/27

而 autoprefix也是根据 https://github.com/ai/browserslist 进行配置的

但是这里的 autoprefix 和 cssnano 对package.json中的

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
]

处理不同, 所以 像 -webkit-box-orient: vertical;这中属性就被cssnano给优化掉了 解决方法就是变成下面这样

 "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "android 4"
  ]