Webpack：為什么'style-loader！css-loader！postcss-loader'不處理導入的文件？

Question

我有page.css @imports index.css。

page.css和index.css都display: flex 。

Webpack.config.js包含：

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

構建后，我從page.css中獲得規則的前綴，但從index.css中獲得的規則沒有前綴。 我究竟做錯了什么？

Answer 1

使用postcss-import插件通過內聯內容來轉換@import規則。

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

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