如果你是前端开发人员，那么你肯定知道 npm 是什么。npm 是一个 Node.js 包管理器，它允许开发人员在自己的项目中使用可重用的代码。在这篇文章中，我们将讨论一个 npm 包，它叫做 spostcss-brunch，这是一个集成了 PostCSS 的 brunch 插件，它可以帮助你在 brunch 构建过程中使用 PostCSS。
什么是 PostCSS？
PostCSS 是一个用 JavaScript 编写的工具集，用于处理 CSS。它通过 JavaScript 插件系统扩展 CSS，使得你可以使用未来的 CSS 功能，并且可以编写自定义的插件来处理你的 CSS。
PostCSS 并非是一种预处理器，它只是一个能够处理 CSS 文件的工具。如果你想在构建过程中使用像 Sass、Less 等预处理器，则需要在使用 PostCSS 之前将它们编译成 CSS。
spostcss-brunch 是什么？
spostcss-brunch 是一个 brunch 插件，它集成了 PostCSS。使用 spostcss-brunch，你可以在 brunch 构建过程中使用 PostCSS 来处理你的 CSS 文件。
spostcss-brunch 支持许多 PostCSS 插件，以及你自己编写的插件。除此之外，它还支持源映射，这对于调试非常有用。
如何使用 spostcss-brunch？
要使用 spostcss-brunch，你需要在项目中安装它。你可以通过运行以下命令来安装它：
npm install --save spostcss-brunch
接下来，在你的 brunch 配置文件中添加以下内容：
-- -------------------- ---- -------
-------------- - -
---
-------- -
-------- -
----------- -
--------------------------
-
-
-
--你可以将 spostcss-brunch 添加到任何位置，但建议将其添加到 processor 列表的开头。
模块化方式引入样式文件：
require('path/to/my/css/file.css');这将在 brunch 构建过程中处理你的 CSS 文件，并将其编译为有效的 CSS 格式。
spostcss-brunch 的高级使用
添加自定义插件
spostcss-brunch 支持许多 PostCSS 插件。你可以在 processors 中添加自己编写的插件，方法如下：
-- -------------------- ---- -------
----- -------------- - ----------------------------
-------------- - -
---
-------- -
-------- -
----------- -
-----------------
--------------------------
-
-
-
--开启源映射
如果你希望在开发模式下使用源映射，以便在调试时可以更轻松地找到错误所在，可以通过以下方式启用源映射：
-- -------------------- ---- -------
-------------- - -
---
-------- -
-------- -
---- ---------
----------- -
--------------------------
-
-
-
--集成 Autoprefixer
为了让 CSS 样式兼容更多的浏览器，在使用 PostCSS 时建议集成 Autoprefixer 插件。
-- -------------------- ---- -------
-------------- - -
---
-------- -
-------- -
----------- -
-------------------------
--------- ------ - ----------
---
--------------------------
-
-
-
--上面的示例将使用 Autoprefixer 插件处理 CSS，并确保在最近两个版本的浏览器中，你的 CSS 样式得到充分兼容。
结论
spostcss-brunch 是一个非常有用的 brunch 插件，它将 PostCSS 集成到 brunch 构建过程中，让你的 CSS 样式更加灵活和可变。它非常容易配置，支持许多 PostCSS 插件，并具有源映射功能，使调试更加便捷。给你的项目添加 spostcss-brunch，以便让你的开发流程更加流畅和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562da81e8991b448e03fe