autoprefixer在webpack下build中无效是什么原因啊？

Question

webpack的配置文件是用vue-cli生成的
vue: {

loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
postcss: [
  require('autoprefixer')({
    browsers: ['ios >= 7.0']
  })
]

}
这里改了一句『browsers: ['ios >= 7.0']』
.box {
display: flex;
}
然后 run dev 可以在浏览器看到
.box {
display: -webkit-flex;
display: flex;
}
但是 run build 生成的文件是这样的
.box{display:flex}
不知道为什么不能上传图片，意思就是这样的。。。求指导。。。。

Answer 1

你用的是不是webpack1？
你的run build是不是比run dev多运行了uglifyjs插件？
如果是恭喜你被bug坑了，使用了压缩插件会导致所有loader添加min配置，而autoprefixser也被定格到某个browers配置，反正就是看不见-webkit-flex

解决方案:用webpack2

Answer 2

给 css-loader 配置：

query: {
    autoprefixer: false
}

或者

css-loader?autoprefixer=false

原因如 @czl 所说，css-loader 与 uglify 插件同时使用时，被配置了全局的 minimize=true，导致 css-loader 中的 cssnano 启用，cssnano 中的 autoprefixer 默认支持的浏览器可能不包含我们需要的前缀。默认支持的浏览器：

Browserslist will use defaults: > 1%, last 2 versions, Firefox ESR.

解决办法如上，关闭 css-loader 的 autoprefixer 选项，它会同步传递给 cssnano。

Answer 3

run build 执行的 webpack 命令 读取的是同一个配置文件么？

Answer 4

No prefixes in production

Many other tools contain Autoprefixer. For example, webpack uses Autoprefixer to minify CSS by cleaning unnecessary prefixes.

If you set browsers list to Autoprefixer by browsers option, only first Autoprefixer will know your browsers. Autoprefixer inside webpack will use default browsers list. As result, webpack will remove prefixes, that first Autoprefixer added.

You need to put your browsers to browserslist config in project root — as result all tools (Autoprefixer, cssnano, doiuse, cssnext) will use same browsers list.

Answer 5

如果不想升级webpack2的话，可以用gulp来弥补。
写个gulp autoprefixer的方法，直接覆盖dist目录下的css文件，然后在build.js文件中 webpack方法执行完事的callback中添加一个命令就行了exec('npm run gulp')

Answer 6

直接根目录添加browserslist , 或者package.json 里面配置browserslist 不就好了？