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

Question

我正在了解postcss-loader的用途。

在github页面

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

上说：

是webpack的一个loader，用于使用PostCSS处理CSS

我不太理解：PostCSS是一个用于处理CSS的WP-Loader吗？

在我看来，这似乎是一个循环定义。

那么什么是PostCSS，它是一个CSSLoader吗？或者，由于它被称为 Post CSS，它是在某些其他CSS加载程序之后运行的加载程序？

- LongHike

Answer 1

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;
}

- SynergyChen

Answer 2

实际上，它不是直接用于 PostCSS 的插件，而是在 Webpack 内部运行。如果您在项目中使用 Webpack 进行模块绑定，那么为了将 PostCSS 用作 CSS 预处理器，您必须使用 postcss-loader 并添加其配置。

例如，您可以查看 THIS REPO，在 webpack 文件夹中，有两个配置文件分别用于开发和生产环境，打开其中一个文件，没有区别，并搜索其中的 postcss-loader 一词，查看此用法的完整示例。

- AmerllicA

---

该仓库无法通过“拒绝访问”访问。 - amirhe

@AmirhosseinEbrahimi，这个仓库是公开的，但是你的IP受到了美国制裁，所以请使用VPN来规避制裁。 - AmerllicA

Answer 3

所以说，PostCSS是用于使用PostCSS处理CSS的WP-Loader吗？

不是。

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

即它将PostCSS加载到Webpack中。

依我看，这是一个循环定义。

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

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

不是。 PostCSS是：

用JS插件转换样式的工具。这些插件可以对您的CSS进行linting，支持变量和mixin，转译未来的CSS语法，内联图像等等。

- Quentin