webpack - 如何创建 common.css 文件并仅使用 postcss？

Question

这是我当前的 webpack 配置 – https://gist.github.com/lavezzi1/1179d91c584c0b0a7544c862c8bb07ca

如您所见，我做多页应用程序并面临一些问题。

1. 我想为每个页面编译 2 个文件：common.css（具有通用样式的 css 文件）和index.css（例如具有索引页面的单独样式的 css 文件）。我怎么能这样做？我尝试了 CommonChunks 插件，但它只生成 common.js 文件，而不是 css。现在我找到了一个解决方法，我只是直接在每个页面的入口 js 文件中导入 main.css 文件。但它带来了另一个问题，如下所述；

2. 我想在没有任何预处理器的情况下使用 postcss。可能吗？当我直接在 js 文件中导入 main.css 时，postcss 插件不起作用（代码无法编译）我测试了 postcss 嵌套插件，它在 *.vue 文件中工作得很好。如何解决？

我非常坚持。我希望你能帮忙。谢谢！

Answer 1

您是否尝试过添加!postcss-loader之后!css-loader？

最终结果将是：

loader: ExtractTextPlugin.extract('style-loader','css-loader!postcss-loader?sourceMap!sass-loader')