介绍
rework-inline 是一个在 CSS 中嵌入其它文件的 rework 插件。使用这个插件，可以在 CSS 中直接引用图片、字体、SVG 等文件，无需手动将其转换成 base64 编码。
rework-inline 支持多种文件格式，包括：
- PNG、JPEG、GIF 图片
- 字体文件（TTF、OTF、EOT、WOFF）
- SVG 图像
安装
安装 rework-inline：
--- ------- ------------- ----------
使用
使用 rework-inline 插件很简单。首先需要引入 rework 模块和 rework-inline 模块，然后调用 rework.inline() 方法即可。
下面是一个简单的例子，我们将样式表中的图片和字体文件都转换成了 base64 编码：
--- ------ - ------------------ --- ------ - ------------------------- --- --- - ------------ - ----------- ------------ --- -------------- ------------
上面这个例子中，我们将样式表中的 bg.png 文件直接引用了进来。
如果样式表中有多个文件需要嵌入，可以像下面这样使用：
--- --- - ------------ - ----------- ------------ ------ --------------- --- -------------- ------------
文件格式支持
rework-inline 支持多种文件格式，包括 PNG、JPEG、GIF 图片、字体文件（TTF、OTF、EOT、WOFF）和 SVG 图像。
图片
使用 rework-inline 插件将图片转换成 base64 编码非常简单。只需要在样式表中引用图片文件即可：
---- - ----------- ------------ -
rework-inline 将自动将 bg.png 文件转换成 base64 编码，并将其嵌入到生成的样式表中：
---- - ----------- ------------------------------------ --- -------- -
字体
使用 rework-inline 插件将字体文件转换成 base64 编码非常简单。只需要在样式表中引用字体文件即可：
---- - ------------ ----- ---- --------- ---- --------------------------- -
rework-inline 将自动将 open-sans-regular.ttf 文件转换成 base64 编码，并将其嵌入到生成的样式表中：
---- - ------------ ----- ---- --------- ---- ---------------------------------------------------------------------------- --- ------- -
SVG
使用 rework-inline 插件将 SVG 图像转换成 base64 编码也很简单。只需要在样式表中引用 SVG 文件即可：
---- - ----------- -------------- -
rework-inline 将自动将 logo.svg 文件转换成 base64 编码，并将其嵌入到生成的样式表中：
---- - ----------- --------------------------------------- --- -------- -
选项
rework-inline 插件支持一些可选的选项，可以通过传递一个选项对象给 rework.inline() 方法来设置这些选项。
目前支持的选项有：
compress：是否压缩转换后的 base64 编码，默认为 true。
例如，我们可以通过下面的方法来设置不压缩转换后的 base64 编码：
--- --- - ------------ - ----------- ------------ --- ------------- --------- ----- --- ------------
结语
rework-inline 是一个非常实用的 rework 插件，它使得在 CSS 中嵌入图片、字体、SVG 等文件变得非常简单。在实际的前端开发中，我们会经常用到这个插件。我希望这篇文章能够帮助大家更好地理解和学习 rework-inline 插件的使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb3ecb5cbfe1ea06111f1