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

Question

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

• 将生成的 CSS 注入(inject)您的网页
• 返回给您一个类名字典以供使用。

而且用法也很简单:

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

我想测试替代的 CSS 模块实现，一个 PostCSS 插件 - 因为它似乎可以与其他 PostCSS 插件一起使用，尤其是 autoprefixer .但是根据官方documentation与 webpack CSS 模块相比，postcss-modules 的工作方式似乎非常不同。文档中没有使用示例，只有一些生成 JSON 的回调代码。在实践中如何使用它来实现与上述示例代码相同的目标的任何示例？

Answer 1

我是插件的作者。我现在正在重写它，然后我会立即编写示例。

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

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