介绍
npm 是 Node.js 的包管理工具，而 rework-bower 则是一个 npm 包，它可以让你的 CSS 文件更容易地被引用和管理，同时，rework-bower 也提供了一些方便的方法，帮助你快速编写和编辑 CSS。
安装
要安装 rework-bower，你需要使用 npm 命令：
npm install rework-bower --save-dev
引用
为了让样式表使用 rework-bower，你需要引入它。在你的 JavaScript 文件中添加如下代码：
var reworkBower = require('rework-bower');然后，在你的样式表中添加如下代码：
@import 'rework-bower';
这样，rework-bower 就会被自动引入，你的 CSS 文件就可以使用 rework-bower 提供的功能了。
使用方法
在你的 CSS 文件中，你可以使用 rework-bower 提供的一些方法，以便更方便地写出样式。
@import
@import 可以用来导入其他文件中定义的样式。
在 CSS 文件中添加如下代码：
@import 'base/reset';
如上所示，你可以使用 @import 导入其他文件夹下的 CSS 文件。
@mixin
@mixin 可以用来声明一个混合器。
在 CSS 文件中添加如下代码：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}接下来，你就可以在其他样式规则中使用该混合器：
.box {
@mixin border-radius(10px);
}上述代码将生成如下 CSS 代码：
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}@extend
@extend 可以用来继承其他规则的样式。
在 CSS 文件中添加如下代码：
-- -------------------- ---- ------- --------------- - ----------------- ----- ------ ------ ------- ----- -------- ----- - ----------------- - ------- ---------------- ----------------- ------ -
如上所示，你可以使用 @extend 语句将一个选择器的样式应用于另一个选择器上。
示例代码
下面是一个使用 rework-bower 的示例代码：
-- -------------------- ---- -------
------- ---------------
------ ---------------------- -
---------------------- --------
------------------- --------
------------------ --------
-------------- --------
-
--------------- -
----------------- -----
------ ------
------- -----
-------- -----
-
----------------- -
------- ----------------
----------------- ------
-
---- -
------ --------------------
----------------- -----
-------- -----
------- -----
-总结
本文介绍了 npm 包 rework-bower 的使用方法，包括如何安装、引用和使用它提供的一些功能。通过使用 rework-bower，你可以更方便地管理和编辑 CSS 文件，同时，减少重复的代码。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb509b5cbfe1ea06113bd