Webpack postcss 加载器，它的用途是什么？

Question

我想知道 postcss-loader 有什么用。

在 github 页面上

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

它说：

Webpack 的加载程序以处理 CSS 和 PostCSS

我不明白：所以，PostCSS 是一个 WP-Loader 来处理 CSS 和 PostCSS?

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

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

Answer 1

So, PostCSS is a a WP-Loader to process CSS with PostCSS?

没有

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

即它将 PostCSS 加载到 Webpack 中。

IMHO, that's a circular definition

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

So what is PostCSS, is it a CSSLoader?

没有。 PostCSS 是：

a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

Answer 2

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

比如可以看到THIS REPO，在webpack文件夹下，有两个开发环境和生产环境的配置文件，打开其中一个，没有区别，搜索postcss-loader 中的单词，请参阅此用法的完整示例。

Answer 3

PostCSS: 使用JavaScript插件转换CSS.

PostCSS Loader：在 Webpack[=12= 中用 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;
}

Webpack postcss 加载器，它的用途是什么？

Webpack postcss loader, what's its purpose?

webpack

postcss

postcss-loader