Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/webpack/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
有没有关于如何使用postcss模块而不是css模块的示例?_Css_Webpack_Postcss_Css Modules - Fatal编程技术网

有没有关于如何使用postcss模块而不是css模块的示例?

有没有关于如何使用postcss模块而不是css模块的示例?,css,webpack,postcss,css-modules,Css,Webpack,Postcss,Css Modules,内置在webpack中的CSS模块支持看起来非常简单:您只需要求/导入CSS文件,而webpack生成的代码可以完成两件事: 将生成的CSS注入到您的网页中 返回要使用的类名字典 而且用法也很简单: import styles from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">'; 从“/style.css”导入样式; element.innerHTML=''; 我想测

内置在
webpack
中的CSS模块支持看起来非常简单:您只需
要求
/
导入
CSS文件,而webpack生成的代码可以完成两件事:

  • 将生成的CSS注入到您的网页中
  • 返回要使用的类名字典
而且用法也很简单:

import styles from "./style.css";
element.innerHTML = '<div class="' + styles.className + '">';
从“/style.css”导入样式;
element.innerHTML='';
我想测试替代CSS模块实现,一个
postss
插件-因为它似乎与其他
postss
插件,特别是
autoprefixer
配合得很好。但根据官方的说法,
postsss模块
的工作原理与
webpack
CSS模块非常不同。其中文档中没有使用示例,只有一些生成
JSON
的回调代码。有没有示例说明如何在实践中使用它来实现与上述示例代码相同的目标?

您可以了解post css插件的用法。他们并没有使用PostCSS作为css加载器的替代品,而是作为它的补充


如果你看一下第99行。他们创建了post-css函数,该函数被称为第一个加载程序。在本例中,在对css进行预处理后,他们调用其他加载程序。

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

在回调中,您可以将JSON对象与类的描述一起保存,并将其读入代码中。您应该读取JSON文件,而不是CSS:

import styles from "./style.css.json";
element.innerHTML = '<div class="' + styles.className + '">';
从“/style.css.json”导入样式;
element.innerHTML='';

非常感谢!但是为了让webpack运行将
css
转换为
json
的加载程序,需要在某个地方指定这个
css
文件吗?所以我需要
import
两个
css
来生成
json
css
,然后
import
json
来获取名称,对吗?在您的情况下,最好使用css加载器,您可以使用任何postss插件<代码>POSTSS模块
是为服务器端渲染而创建的。但是如果你想在网页包中使用它,你必须用另一个工具来构建你的CSS,比如Gulp。或者您只能使用Webpack,但您必须在JS之前以某种方式构建CSS。您应该何时在pcss文件中导入pcss文件,以及何时在JS文件中使用require?这个问题是关于postcss模块的,而不是关于如何将postcss与CSS loader一起使用。