npm 包 rework-inline 使用教程

介绍

rework-inline 是一个在 CSS 中嵌入其它文件的 rework 插件。使用这个插件，可以在 CSS 中直接引用图片、字体、SVG 等文件，无需手动将其转换成 base64 编码。

rework-inline 支持多种文件格式，包括：

• PNG、JPEG、GIF 图片
• 字体文件（TTF、OTF、EOT、WOFF）
• SVG 图像

安装

安装 rework-inline：

npm install rework-inline --save-dev

使用

使用 rework-inline 插件很简单。首先需要引入 rework 模块和 rework-inline 模块，然后调用 rework.inline() 方法即可。

下面是一个简单的例子，我们将样式表中的图片和字体文件都转换成了 base64 编码：

var rework = require('rework');
var inline = require('rework-inline');

var css = rework('body { background: url(bg.png); }')
  .use(inline())
  .toString();

上面这个例子中，我们将样式表中的 bg.png 文件直接引用了进来。

如果样式表中有多个文件需要嵌入，可以像下面这样使用：

var css = rework('body { background: url(bg.png); color: url(text.woff); }')
  .use(inline())
  .toString();

文件格式支持

rework-inline 支持多种文件格式，包括 PNG、JPEG、GIF 图片、字体文件（TTF、OTF、EOT、WOFF）和 SVG 图像。

图片

使用 rework-inline 插件将图片转换成 base64 编码非常简单。只需要在样式表中引用图片文件即可：

body {
  background: url(bg.png);
}

rework-inline 将自动将 bg.png 文件转换成 base64 编码，并将其嵌入到生成的样式表中：

body {
  background: url(data:image/png;base64,iVBORw0KGg ... IAAA==);
}

字体

使用 rework-inline 插件将字体文件转换成 base64 编码非常简单。只需要在样式表中引用字体文件即可：

body {
  font-family: 'Open Sans Regular';
  src: url(open-sans-regular.ttf);
}

rework-inline 将自动将 open-sans-regular.ttf 文件转换成 base64 编码，并将其嵌入到生成的样式表中：

body {
  font-family: 'Open Sans Regular';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAATAQAABAAwR0RFRPU ... sdf==);
}

SVG

使用 rework-inline 插件将 SVG 图像转换成 base64 编码也很简单。只需要在样式表中引用 SVG 文件即可：

body {
  background: url(logo.svg);
}

rework-inline 将自动将 logo.svg 文件转换成 base64 编码，并将其嵌入到生成的样式表中：

body {
  background: url(data:image/svg+xml;base64,PHN2ZyB4b ... NlPg==);
}

选项

rework-inline 插件支持一些可选的选项，可以通过传递一个选项对象给 rework.inline() 方法来设置这些选项。

目前支持的选项有：

• compress：是否压缩转换后的 base64 编码，默认为 true。

例如，我们可以通过下面的方法来设置不压缩转换后的 base64 编码：

var css = rework('body { background: url(bg.png); }')
  .use(inline({ compress: false }))
  .toString();

结语

rework-inline 是一个非常实用的 rework 插件，它使得在 CSS 中嵌入图片、字体、SVG 等文件变得非常简单。在实际的前端开发中，我们会经常用到这个插件。我希望这篇文章能够帮助大家更好地理解和学习 rework-inline 插件的使用。

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