介绍
broccoli-cssnext 是一个基于 broccoli 的插件，它可以让你使用 cssnext 在你的 broccoli 构建流程中处理 CSS 文件。cssnext 是一个 CSS 的预处理器，它支持未来的 CSS 语法、自定义属性、嵌套规则、循环结构等功能，并且可以自动添加浏览器前缀。
broccoli-cssnext 的安装和使用非常简单，只需要几个简单的步骤就可以开始使用它了。
安装
使用 npm 安装 broccoli-cssnext：
npm install --save-dev broccoli-cssnext
使用
在你的
Brocfile.js中，引入 broccoli-cssnext：var cssnext = require('broccoli-cssnext');使用 cssnext 处理你的 CSS 文件：
var outputTree = cssnext(inputTree, options);
inputTree是你的输入树，options是可选的配置对象，用于配置 cssnext 的参数。调用cssnext方法将会返回一个新的树结构，其中包含了使用 cssnext 处理后的 CSS 文件。下面是一个使用 cssnext 处理 CSS 的例子：
var cssnext = require('broccoli-cssnext'); var tree = cssnext('app/styles', { includePaths: ['node_modules'] }); module.exports = tree;
配置项
在 options 中，可以配置下面的属性：
includePaths：指定 cssnext 查找依赖文件的路径列表。默认值是一个空数组。compress：是否压缩 CSS 文件。默认为 false。sourcemap：是否生成source map。默认为 false。warnForDuplicates：是否在 console 中警告重复的样式定义。默认为 false。
示例
下面是一个将 CSS 文件使用 cssnext 处理后的例子：
-- -------------------- ---- -------
-- --------- --
----- -
------------- --------
-
-- -
---------- -----
------ ------------------
-
---- -
----------- --- --- -----
------- -
------------ -----
------ -----
-
-
------ ------ --- ----------- ------ -
---- -
---------- -----
-
--- -------------------- ---- ------- -- ----------- --- ------- - ---------------------------- --- ---- - ----------------- - ------------- ---------------- --- -------------- - -----
-- -------------------- ---- -------
-- ---------- --
-- -
---------- -----
------ --------
-
---- -
----------- --- --- -----
-
---------- -
------------ -----
------ -----
-
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-总结
broccoli-cssnext 是一个非常方便的工具，可以让你使用 cssnext 处理 CSS 文件，并且可以自动添加浏览器前缀，使你的代码更加规范、简洁，同时还支持未来的 CSS 语法。在使用过程中，我们需要了解配置项的意义和使用方式，以便更好地配置 broccoli-cssnext 来满足我们的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde52e5