npm 包 rework-npm 使用教程

在前端开发中，我们经常需要用到 CSS 预处理器来编写更加简便和可维护的 CSS 代码。其中，rework 是一个非常流行的 CSS 预处理器，它能够支持插件扩展，提供了强大的 CSS 转换功能。rework-npm 是 rework 的一个插件，可以让我们在 CSS 中直接引入 npm 包。

本文介绍了如何使用 npm 包 rework-npm，让你在项目中更加便捷的使用已有的npm 库。

安装 rework 和 rework-npm

首先，需要安装 rework 和 rework-npm。

npm install rework rework-npm --save-dev

在项目中使用 rework-npm

在项目中使用 rework-npm 之前，需要先在构建工具中加载 rework 和 rework-npm，这里以 webpack 为例：

先在 webpack 的配置文件中添加 rework-loader：

-- -------------------- ---- -------
-------------- - -
  -- ---
  ------- -
    ------ -
      -
        ----- ---------
        ---- ---------------- ------------- ----------------
      -
    -
  -
--
展开代码

然后在项目中的 CSS 文件中，就能够使用 rework-npm 插件来直接引入 npm 包了：

@npm normalize.css;

body {
  font-family: 'Helvetica Neue', sans-serif;
  color: #444;
  background: #f0f0f0;
  normalize.css;
}

这里我们使用了 normalize.css 这个 npm 包来重置浏览器默认样式，并且直接在 CSS 中引入使用。

通过以上配置，实际上会将 npm 包的内容替换到 CSS 中，并且不需要我们去手动下载这些依赖。

更多 rework-npm 用法

除了直接引入 npm 包之外，rework-npm 还支持将 npm 包作为变量使用：

@npm { prefix: '~bootstrap/' } bootstrap;

@import bootstrap/css/bootstrap.css;

/* ... */

这里使用了 bootstrap 这个 npm 包，将 Bootstrap 的 CSS 文件引入到当前文件中。

总结

本文介绍了如何使用 rework-npm 这个在 CSS 中引入 npm 包的工具，更加方便我们在前端项目中使用依赖。除了基本的引入之外，还介绍了 npm 包作为变量的用法，也能够提供更加强大的定制功能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73410