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

【问题标题】：Are where any examples available on how to use postcss-modules instead of css-modules?哪里有关于如何使用 postcss-modules 而不是 css-modules 的示例？
【发布时间】：2016-01-27 14:52:53
【问题描述】：

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 与webpack CSS 模块的工作方式似乎大不相同。文档中没有使用示例，只有一些生成JSON 的回调代码。任何示例如何在实践中使用它来实现与上述示例代码相同的目标？

【问题讨论】：

标签： css webpack postcss css-modules

【解决方案1】：

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

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

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

【讨论】：

非常感谢！但是为了让 webpack 运行将 css 转换为 json 的加载程序，这个 css 文件需要在某处指定吗？所以我需要import 和css 来生成json 和css，然后import json 来获取名字，这是正确的吗？
在你的情况下，最好使用 CSS Loader，你可以使用任何 PostCSS 插件。 postcss-modules 是为服务器端渲染而创建的。但是如果你想将它与 webpack 一起使用，你必须使用另一个工具来构建你的 CSS，比如 Gulp。或者你可以只使用 Webpack，但你必须在 JS 之前构建 CSS。
什么时候应该在pcss文件中导入pcss文件，什么时候应该在js文件中使用require？

【解决方案2】：

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

如果您查看第 99 行。他们创建了称为第一个加载程序的 post-css 函数。给出的示例适用于 scss，但您可以将其更改为 css。在这种情况下预处理 css 后，它们会调用其他加载器。

【讨论】：

这个问题是关于 postcss-modules，而不是关于如何将 postcss 与 css-loader 一起使用。