有关如何使用postcss-modules而不是css-modules的示例吗？

Question

内置于webpack的CSS模块支持看起来非常简单：您只需require / import CSS文件和webpack生成的代码可以做两件事：

• 将生成的CSS注入您的网页
• 返回您要使用的类名字典。

用法非常简单：

import styles from "./style.css";
element.innerHTML = '<div class="' + styles.className + '">';

我想测试其他CSS模块实现，一个PostCSS插件 - 因为它似乎与其他PostCSS插件兼容，尤其是autoprefixer。但根据官方documentation，与postcss-modules CSS模块相比，webpack似乎有很大不同。文档中没有使用问题，只有一些生成JSON的回调代码。在实践中如何使用它来实现与上面的示例代码相同的目标？

Answer 1

我是该插件的作者。我现在正在重写它，之后我会写下这个例子。

在回调中，您可以使用类的描述保存JSON对象并将其读入代码中。您应该阅读JSON文件，而不是CSS：

import styles from "./style.css.json";
element.innerHTML = '<div class="' + styles.className + '">';

Answer 2

您可以查看post {css插件的following用法。他们没有使用post-css作为css-loader的替代品，而是作为它的补充。

如果你看一下第99行。他们创建post-css函数，它被称为第一个loader。给出的例子是scss但是你可以把它改成css。在这种情况下预处理css后，他们会调用其他加载器。