3

内置的 CSS Modules 支持webpack看起来很简单：你只需在require/ importCSS 文件和 webpack 生成代码，它会做两件事：

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

用法也很简单：

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

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

4

2 回答 2

1

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

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

import styles from "./style.css.json";
element.innerHTML = '<div class="' + styles.className + '">';
于 2016-01-27T06:52:53.683 回答
0

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

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

于 2016-01-26T09:15:57.100 回答