在前端开发中，我们经常需要用到 CSS 预处理器来编写更加简便和可维护的 CSS 代码。其中，rework 是一个非常流行的 CSS 预处理器，它能够支持插件扩展，提供了强大的 CSS 转换功能。rework-npm 是 rework 的一个插件，可以让我们在 CSS 中直接引入 npm 包。
本文介绍了如何使用 npm 包 rework-npm，让你在项目中更加便捷的使用已有的npm 库。
安装 rework 和 rework-npm
首先，需要安装 rework 和 rework-npm。
--- ------- ------ ---------- ----------
在项目中使用 rework-npm
在项目中使用 rework-npm 之前，需要先在构建工具中加载 rework 和 rework-npm，这里以 webpack 为例：
先在 webpack 的配置文件中添加 rework-loader：
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- ---------------- ------------- ----------------
-
-
-
--然后在项目中的 CSS 文件中，就能够使用 rework-npm 插件来直接引入 npm 包了：
---- -------------- ---- - ------------ ---------- ------ ----------- ------ ----- ----------- -------- -------------- -
这里我们使用了 normalize.css 这个 npm 包来重置浏览器默认样式，并且直接在 CSS 中引入使用。
通过以上配置，实际上会将 npm 包的内容替换到 CSS 中，并且不需要我们去手动下载这些依赖。
更多 rework-npm 用法
除了直接引入 npm 包之外，rework-npm 还支持将 npm 包作为变量使用：
---- - ------- ------------- - ---------- ------- ---------------------------- -- --- --
这里使用了 bootstrap 这个 npm 包，将 Bootstrap 的 CSS 文件引入到当前文件中。
总结
本文介绍了如何使用 rework-npm 这个在 CSS 中引入 npm 包的工具，更加方便我们在前端项目中使用依赖。除了基本的引入之外，还介绍了 npm 包作为变量的用法，也能够提供更加强大的定制功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/73410