Vue-loader: autoprefixer in vue-loader doesn't work...

[KeithChou]

According to the vue-loader' README.md file , I put the same code in my webpack.config.js , but there are not prefixes at all.
webpack.config.js

module.exports = {
    entry: __dirname + '/app/entry.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.vue$/,
            loader: 'vue'
        },{
            test: /\.js$/,
            exclude: /node_modules/,
            loader:'babel-loader'
        },{
            test: /\.(sass|scss)$/,
            loader:'style!css!postcss!sass'
        },{
            test: /\.css$/,
            loader:ExtractTextPlugin.extract('style-loader','css-loader?importLoaders=1')
            // loader:'style!css'
        },{
            test: /\.(html|tpl)$/,
            loader: 'html-loader'
        },{
            test: /\.(png|jpg|gif)$/,
            loader: 'url-loader?limit=8192'
        }]
    },
    vue:{
        autoprefixer: {
            browsers: ['last 2 versions']
        }
    },
    plugins:[
        new ExtractTextPlugin('/css/[name].css')
    ]
};

topBar.vue \

<style lang ='sass' scoped>
    .haha{
        font-weight: bold;
        p {
            color: red;
            display: inline-block;
            height: 100px;
            font-weight: bold;
            background-color: red;
            border-radius: 10px;
            box-shadow: 3px 3px 3px #ccc;
            transition: all 0.3s;
            display: flex;
        }
    }
</style>

but when I run webpack .. just the same code , no prefixes...

.haha p[data-v-a64cfc10] {
    background-color: red;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #ccc;
    color: red;
    display: flex;
    font-weight: bold;
    height: 100px;
    transition: all 0.3s ease 0s;
}

and there is an examplanation on the Autoprefixer .

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.

I also do that , but it also doesn't work..and the project directory like this

1. app
   *. assets
   *. components
   *. browserslist
   ...
2. dist

If you know how to do that .. please tell me ..
thu ...

[jbruni]

Try this in your webpack config:

    vue: {
        postcss: [require('autoprefixer')()],
        autoprefixer: false
    }

[KeithChou]

@jbruni , i doesn't work as well .. i have a question that you turn off the autoprefixer .. is it will work?
By the way, i change it to true .. alse not working ..
is it a bug??? it confused me a long time ...

webpack.config.js

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: __dirname + '/app/entry.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.vue$/,
            loader: 'vue'
        },{
            test: /\.js$/,
            exclude: /node_modules/,
            loader:'babel-loader'
        },{
            test: /\.(sass|scss)$/,
            loader:'style!css!postcss!sass'
        },{
            test: /\.css$/,
            loader:ExtractTextPlugin.extract('style-loader','css-loader?importLoaders=1')
            // loader:'style!css'
        },{
            test: /\.(html|tpl)$/,
            loader: 'html-loader'
        },{
            test: /\.(png|jpg|gif)$/,
            loader: 'url-loader?limit=8192'
        }]
    },
    vue:{
        postcss: [require('autoprefixer')()],
        autoprefixer: false
    },
    plugins:[
        new ExtractTextPlugin('/css/[name].css')
    ]
};

[KeithChou]

Ummm.. This question has already solved..
thu..

[luchanan]

@KeithChou could you write the method

[LikeDege]

@KeithChou how to solve?

[KeithChou]

@luchanan @LikeDege
if you wrote sass in if you wrote sass in the single *.sass file and import it in entry.js by webpack , you should config the postcss option.

This is my webpack.config.js

module.exports = {
    entry: __dirname + '/app/entry.js',
    output: {
        path: __dirname + '/build/',
        filename: 'bundle.js'
    },
    module: {
        some loaders here..
    },
    vue: {
        postcss: [
            require('autoprefixer')(),
        ]
    },
    postcss: [
        require('autoprefixer')(),
    ]
}

[kazupon]

related #428

[kazupon]

In 10.0.2, I tried check. vue-loader correctly work.
Close

[aboutqx]

Still get this in 10.3.0