介绍
Broccoli-cssnext-single 是一个用来将 CSS 文件通过 cssnext 预处理器处理成兼容性好的 CSS3 的包,同时也允许进行一些自定以的样式处理,如改变变量的值、自定义元素等。使用 broccoli-cssnext-single ,可以让编写 CSS 更加简单和快速。
安装
在npm上安装 broccoli-cssnext-single:
--- ------- -- -----------------------
如何使用
- 创建 CSS 文件,在文件中编写 CSS 代码。
- 在 Brocfile.js 文件中引入 broccoli-cssnext-single :
--- ------- - ----------------------------------- --- ------ - --------------------- - --------- ----- ------- ------------------ ---------- ---- --- -------------- - --- ----------------- ---------
- 编写一些 CSS 样式,如下所示:
--- --------- - ------------ ----- ------ -------- ----------- --- --- ------------ - --------------- - ------ ----- ----------------- -------- - ---
- 在命令行中输入命令
broccoli serve
开启本地服务器,并在浏览器中预览你的页面。
当你修改文件和代码后,Broccoli 会自动重新构建你的项目。此外,Broccoli 还可以合并其他可以合并的项,例如 HTML , SCSS 和 Coffeescript 等。
配置参数
Broccoli-cssnext-single 在使用时需要传递一个对象进行相关配置。在这里讲解这些配置参数的具体作用:
includePaths
: 需要被引入的 CSS 文件所在的目录。设置此项可以让 Broccoli 在编译时自动查找并引入该目录下的 CSS 文件。compress
: 是否需要压缩编译后的 CSS 。默认为true
。import
: 需要被引入的 CSS 文件名。可以是一个字符串或多个字符串的数组。sourceMap
: 是否需要书签映射。默认为false
,即不需要书签映射。
示例代码
在此为大家提供一个完整的示例代码:
-- ----------- --- ------- - ----------------------------------- --- ---------- - -------------------------------- -- --- ----- --- --- - ------------- --- ------ - ------------ - --------- ----- ------- ------------------ ---------- ---- --- -------------- - --- ----------------- ---------
-- ----- -------- -- ------------ - ------ -------- ---------------- ---------- - ------------- - -------- ----- ------- ----- ------ ----- ----------- -------- - ------------ - ---------- ----- -
结论
通过本篇文章,我们明确了 broccoli-cssnext-single的作用,了解了该包的安装和使用方法,并且详细解释了配置参数的作用。希望这篇文章对您有所帮助!
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066c8bccdc64669dde52e6