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是一个用PostCSS处理CSS的WP-Loader？

没有

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

即。它将PostCSS加载到Webpack中。

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

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

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

没有。 PostCSS是：

使用JS插件转换样式的工具。这些插件可以提升CSS，支持变量和混合，转换未来的CSS语法，内嵌图像等。

Answer 2

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

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

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

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

3 个答案: