首页 文章

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

提问于
浏览 次
3

内置于_1593548中的CSS模块支持看起来非常简单：你只需要 require / import CSS文件和webpack生成代码，它们做两件事：

  • 将生成的CSS注入您的网页

  • 返回要使用的类名字典 .

而且用法也非常简单：

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

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

css webpack postcss css-modules

2 回答

  • 1

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

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

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

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

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

    回复于

相关问题