Webpack postcss loader，它的目的是啥？

Posted 2023-02-22

【中文标题】Webpack postcss loader，它的目的是啥？

【英文标题】：Webpack postcss loader, what's its purpose?Webpack postcss loader，它的目的是什么？

【发布时间】：2018-08-27 21:46:25

【问题描述】：

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

在github页面上

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

上面写着：

使用 PostCSS 处理 CSS 的 webpack 加载器

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

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

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

【参考方案1】：

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

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

【讨论】：

无法通过“拒绝访问”访问仓库

@AmirhosseinEbrahimi，这个 repo 是公开的，但是你的 IP 在美国受到制裁，所以使用 *** 来通过制裁。

【参考方案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 语法、内联图像等等。

【参考方案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;