前言
在前端开发过程中，我们会处理大量的 CSS 文件。但是，CSS 本身并不是一种编程语言，不能像 JavaScript 那样拥有变量、函数等特性。因此，开发者必须在 CSS 的基础上，使用一些 CSS 预处理工具，来提高我们的工作效率。Broccoli-myth 就是其中之一。它是一个基于 Broccoli 的 CSS 预处理器，提供了一些便捷的工具和函数，可以更方便地处理我们的 CSS 文件。
安装
使用 Broccoli-myth，需要先安装 Node.js 和 Broccoli。安装 Node.js 可以到官网下载。
安装 Broccoli 可以使用以下命令：
$ npm install -g broccoli-cli
安装 Broccoli-myth：
$ npm install --save-dev broccoli-myth
使用
首先，我们需要创建一个 Broccoli 的 Brocfile.js 文件，再在其中引入 Broccoli-myth。方法如下：
var myth = require('broccoli-myth');
var inputTree = 'app/styles';
var outputTree = 'public/styles';
module.exports = myth(inputTree, options);其中，inputTree 是源 CSS 文件的路径，outputTree 是处理后的 CSS 文件的路径。options 可以配置一些预处理的选项，格式如下：
var options = {
browsers: ['last 2 versions', '> 5%'], // 限制浏览器兼容范围
sourcemaps: true, // 生成 sourcemaps
compress: true // 压缩 CSS
};示例
假设我们有一个 CSS 文件 app/styles/foo.css，内容如下：
/* app/styles/foo.css */
$bg-color: #f3f3f3;
body {
background-color: $bg-color;
}现在，我们可以在 Brocfile.js 文件中使用以下配置：
-- -------------------- ---- ------- --- ---- - ------------------------- --- --------- - ------------- --- ---------- - ---------------- --- ------- - - --------- ------ - ----------- ----------- ----- --------- ---- -- -------------- - --------------- ---------
完成后，我们运行以下命令：
$ broccoli build public
即可将 app/styles/foo.css 文件预处理，并生成处理后的文件 public/styles/foo.css，其中 $bg-color: #f3f3f3; 会编译为 body{background-color:#f3f3f3}。
总结
本文介绍了使用 Broccoli-myth 的方法，并提供了一个基础的使用示例。通过本文，你可以掌握 Broccoli-myth 的安装、配置和使用方法。希望本文对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde505e