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

Question

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

将生成的 CSS 注入您的网页
Returns 你要使用的类名字典。

而且用法也很简单:

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

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

Answer 1

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

如果你看一下第 99 行。他们创建了 post-css 函数，它被称为第一个 loader.The 给出的示例是针对 scss 但你可以将其更改为 css。在这种情况下预处理 css 之后，他们调用其他加载器。

Answer 2

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

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

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

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

Are where any examples available on how to use postcss-modules instead of css-modules?

css

webpack

postcss

css-modules