webpack - Webpack postcss loader，它的目的是什么？

Question

我试图找出 postcss-loader 有什么好处。

在 github 页面上

https://github.com/postcss/postcss-loader

它说：

使用 PostCSS 处理 CSS 的 webpack 加载器

我不明白：那么，PostCSS 是用 PostCSS 处理 CSS 的 WP-Loader 吗？

恕我直言，这是一个循环定义。

那么什么是 PostCSS，它是一个 CSSLoader 吗？或者，既然它被称为Post CSS，它是一个在其他 CSS 加载器之后运行的加载器吗？

Answer 1

实际上，它不是直接的插件PostCSS，它可以在Webpack. 如果您Webpack在项目中使用模块捆绑，那么PostCSS您CSS Preprocessor必须使用postcss-loader并添加它的配置。

比如你可以看到THIS REPO，在webpack文件夹里有两个开发和生产环境的配置文件，打开一个，没有区别，postcss-loader 在里面搜索单词，看这个用法的完整例子。

Answer 2

那么，PostCSS 是一个用 PostCSS 处理 CSS 的 WP-Loader 吗？

不。

PostCSS - loader是一个 WP-Loader，因此您可以在 Webpack 中使用 PostCSS 处理 CSS。

即它将PostCSS加载到 Webpack 中。

恕我直言，这是一个循环定义

这不是因为 PostCSS 和 PostCSS-loader 是不同的东西。

那么什么是 PostCSS，它是一个 CSSLoader 吗？

不，PostCSS 是：

使用 JS 插件转换样式的工具。这些插件可以 lint 你的 CSS，支持变量和 mixins，转换未来的 CSS 语法，内联图像等等。

Answer 3

PostCSS : 使用 JavaScript 插件转换 CSS。

PostCSS Loader : 在 Webpack 中使用 PostCSS 处理 CSS

示例 1

/* Before */
.example {
  display: flex;
}

/* After */
.example {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

示例 2：

/* Before */
:root {
  --green: #00ff00;
}

.example {
  color: var(--green);
}

/* After */
h1 {
  color: #00ff00;
}