vue-loader autoprefixer config

[aidenZou]

在项目中用到了 postcss 的 autoprefixer 插件，

webpack.base.conf.js：

    vue: {
    loaders: utils.cssLoaders(),
    autoprefixer: {
      browsers: ["Android >= 2.3", "ChromeAndroid > 1%", "iOS >= 7"],
      cascade: false  // 不美化输出 css
    }
  }

scss源码

.selector {
    display: flex;
}

dev 模式下输出：

.selector {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

build 模式下输出：

.selector {
  display: -webkit-box;
  display: flex;
}

webpack.base.conf.js 中的 vue.autoprefixer 配置 在build 的时候没有起效

@yyx990803 大大,我这个问题该怎么处理呢

[aidenZou]

巨坑 如下方式解决

css: generateLoaders(['css?-autoprefixer']),
postcss: generateLoaders(['css?-autoprefixer']),
less: generateLoaders(['css?-autoprefixer', 'less']),
sass: generateLoaders(['css?-autoprefixer', 'sass?indentedSyntax']),
scss: generateLoaders(['css?-autoprefixer', 'sass?outputStyle=expanded']),
stylus: generateLoaders(['css?-autoprefixer', 'stylus']),
styl: generateLoaders(['css?-autoprefixer', 'stylus'])

[tonyc726]

@aidenzou 按照你的方法处理了，不过没有明白为何这么处理就可以了，请问能否详细的说明一下

[zhe-he]

当我使用 browsers: ['last 7 versions'] 也可以。

[wszgxa]

一样的问题。按照楼上的方法解决了。。。好坑啊。

[wszgxa]

@aidenzou 为啥那样就可以了啊？

[wesley-jun]

我也是，只有-ms-的前缀，-webkit-根本不出来，用了last 7 versions才好了。 真心坑。。

[pspgbhu]

完美的解决了我的问题

[kaysonli]

webpack 2.0里怎么配置autoprefixer？跟webpack1区别好大，找不到配置的地方了。

[zhe-he]

@kaysonli The best you speak English, so that more people can help you.

test: /\.vue$/,
exclude:/node_modules/,
use: [
    {
        loader: 'vue-loader',
        options: {
            preserveWhitespace: false,
            postcss: [autoprefixer({browsers: ['last 7 versions']})],
            loaders: {
                'js': 'babel-loader?presets[]=es2015'
            }
        }
    }
]

[kaysonli]

@zhe-he Thanks. One more question, when configured like yours, dev mode is OK, but production build still doesn't apply vendor prefix.

[zhaoqize]

cool！今天也遇到类似问题

[lenvonsam]

how to solve this problem of auto del -webkit prefix in prod evn. @kaysonli @zhe-he
one more i use webpack 3.x

[yuxizhe]

@lenvonsam if you use vue-cli . you can open package.json . change "last 2 versions" to "last 7 versions",

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

[lltemplar]

When I delete optimize-css-assets-webpack-plugin in webpack.prod.conf.js the -webkit is not be removed.
I guess optimize-css-assets-webpack-plugin remove -webkit because it use cssnano.
Change "last 2 versions" to "last 7 versions" in package.json can solve this problem

[xiaojingzhao091]

Hi @lltemplar
I've tried add '-autoprefixer' and your suggestion. Unfortunately, both of them are not working. Still no prefix in build css

I've tried to deleted optimize-css-assets-webpack-plugin. And the autoprefixer works properly. But I hope I could keep this plugin. Does anyone know how to fix this?

[lltemplar]

@xiaojingzhao091
modify browserslist in package.json to

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

if want to compatible more browsers you can use

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

you also can query compatible browsers in http://browserl.ist/ using keyword "last 7 versions"

[xiaojingzhao091]

@lltemplar Yes, the file -- package.json is now modified as what you described, but nothing changed

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

And I tried "last 20 versions" as well, nothing changed :(

BTW, I am using vue-cli to init my project and webpack version is 3.6.0. No extra coding after I init this project.

[wuwb]

not woking