在前端开发中，常常需要使用 CSS 预处理器进行代码编写，以加强样式表的可读性和可维护性。而 css-brunch 是一个基于 Brunch 构建工具的 CSS 预处理器插件，可以帮助我们快速地将预处理器代码转换为 CSS 代码。
本篇教程将会介绍 css-brunch 的使用方法，并带领各位读者一步步熟悉如何配置和使用 css-brunch。
安装
首先，我们需要全局安装 Brunch：
npm install -g brunch
然后，我们可以通过 npm 包管理器来安装 css-brunch：
npm install --save-dev css-brunch
配置
在使用 css-brunch 前，我们需要在 Brunch 的配置文件（brunch-config.js）中添加 css-brunch 的配置信息。以下是一份基础的示例配置：
-- -------------------- ---- -------
-------------- - -
-- ------
----- --------------
-- ---------
------ -
------- ---------
-------- -------
--
-- ---------- -----
-------- -
----- -
-------- -
------------- -
---------------
------------
-
-
--
---- -
-- -- ---------- --
------- ---------------------
-
-
--配置信息中，我们指定了 sass 作为 CSS 预处理器，并设置了 includePaths 以便 Brunch 可以正确地查找需要的文件。然后，我们在 plugins 对象中添加了 css-brunch 插件，并指定 plugin 选项指向该插件。
使用
一旦配置完成，我们就可以开始使用 css-brunch 进行 CSS 编译了。以 Sass 为例，创建一个 .scss 文件，并写入以下代码：
$primary-color: #f16d6e;
.foo {
background-color: $primary-color;
&:hover {
color: $primary-color;
}
}然后，在命令行终端输入以下命令：
brunch watch --server
Brunch 会自动监听文件变化，当我们修改了 .scss 文件时，会自动编译成 CSS 文件。编译后的 CSS 文件会被存放在 public 目录下的 assets/stylesheets 文件夹里，与其他样式文件一并生成。
最后，我们可以在 HTML 文件中引用 CSS 文件，以验证是否编译成功。以下是一份引用 CSS 文件的示例代码：
<head>
<link rel="stylesheet" href="/assets/stylesheets/app.css">
</head>在浏览器中打开页面，如果样式被正确地加载，那么表示 css-brunch 的配置和使用都已经正确完成了。
总结
本篇教程中，我们介绍了如何使用 npm 包 css-brunch 进行 CSS 编译，并提供了详细的配置信息和示例代码。希望读者们可以通过这篇文章，掌握 css-brunch 在前端开发中的实用技能，为自己的项目带来更为便捷和高效的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62352