什么是npm包enb-css？
npm包enb-css是一款基于enb构建工具的CSS构建插件。它可以方便的处理CSS代码的依赖关系，并将其打包为一个单独的CSS文件。
enb是一款服务于大型前端项目的构建工具。它使用的是同构化（Isomorphic）的理念，即将前端资源当成node.js的模块进行处理，通过配置文件对资源进行管理、打包和编译。
enb-css的安装
在开始使用enb-css之前，我们需要安装enb，并创建一个enb项目，在终端执行如下命令：
$ npm i enb --save-dev $ mkdir my-enb-project && cd my-enb-project $ npm init
接着，我们需要安装enb-css插件，继续在终端执行如下命令：
$ npm i enb-css --save-dev
enb-css的使用
在完成enb-css的安装之后，我们可以在enb项目中使用enb-css构建我们的CSS。
配置enb project
首先，在项目根目录下创建enb配置文件enb-make.js。
-- -------------------- ---- -------
----- -------- - ---------------------
----- ----------- - -------------------------
----- ------ - -----------------------------
-------------- - ---------------- -
-- ----
-----------------
------------------------------
-------------------------
-- ---------
------------------------------------------- -------------------- -
---------------------
-------------------- - ------- -------------- ---
-----------------
------
---
---
--这里我们声明了一个入口文件common.css，并添加了enbBemTechs和enbCss两个插件。enbBemTechs用于处理BEM的Block/Elem/Mod结构，并生成静态页面。enbCss用于处理CSS文件。
编写CSS代码
在common.css中编写如下代码：
-- -------------------- ---- -------
-- --------------- --
------- ----------------------------------------------
-- ------ --
---- -
-------- -------------
-------- ---- -----
---------- -----
------ -----
----------------- -----
-------------- ----
---------------- -----
-
----------- ---------- -
------ -----
----------------- -----
-这里我们引入了normalize.css，并定义了一个.btn类。
构建CSS文件
我们使用如下命令构建CSS文件：
$ npx enb make
执行完命令之后，我们可以在_enb目录下看到生成的CSS文件。
在HTML中引用CSS
最后，我们可以将生成的CSS文件引用到HTML中：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ------------
----- ---------------- -----------------------------------------
-------
------
-- ----------- ---------------
-------
-------启动一个静态服务器，我们就可以在浏览器中看到样式已经被应用到按钮上了。
总结
本篇文章介绍了npm包enb-css的使用方法，通过学习enb-css的使用，我们能够更好地理解和掌握enb构建工具。同时，我们也了解了CSS构建工具的实现原理及使用场景，为构建优秀的前端项目提供了指导意义。
最后，附上本文中使用的示例代码，供读者参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e25a563576b7b1ece68