Webpack: Why 'style-loader!css-loader!postcss-loader' doesn't process imported files?

Question

I have page.css that @imports index.css.

Both of page.css and index.css has display: flex.

Webpack.config.js contains:

module: {
    loaders: [
        { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" }
    ]
},
postcss: function () {
    return [ autoprefixer({ browsers: ['last 5 versions'] }) ];
}

After building I got prefixes in rules from page.css but rules from index.css left without prefixes. What am I doing wrong?

Answer 1

Use postcss-import plugin to transform @import rules by inlining content.

module: {
    loaders: [
        { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" }
    ]
},
postcss: function () {

    return [ 
        require('postcss-import')(),
        autoprefixer({ browsers: ['last 5 versions'] })
    ];
}