javascript - Webpack：为什么'style-loader！css-loader！postcss-loader'不处理导入的文件？

Question

我有 @imports index.css 的 page.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'] })
    ];
}