在前端开发中，我们经常会使用 css 来定义页面样式，而且大多数情况下这些样式都是以外部文件的形式进行引入。然而，在开发微信小程序时，我们经常遇到需要直接在 wxml 或者 wxss 中定义样式的情况。在这种情况下，我们不能直接引入外部的 css 文件，因此需要一种将 css 文件转换成 base64 编码的方式来解决这个问题。
在本文中，我们将介绍一种名为 wx-css2base64 的 npm 包，它可以帮助我们将 css 文件转换成 base64 编码，并在 wxml 或 wxss 中使用。下面让我们来看一下该 npm 包的使用方法吧。
安装
要使用 wx-css2base64，首先需要安装该 npm 包。可以通过以下命令进行安装：
npm install wx-css2base64 --save-dev
使用 --save-dev 的原因是我们只需要在开发时使用该包，而在项目的生产环境中不需要使用。
使用
安装完成后，我们可以在命令行中直接使用 wx-css2base64，例如：
wx-css2base64 input.css output.css
这个命令会将当前目录下的 input.css 文件转换成 base64 编码，并将结果输出到 output.css 文件中。
但是，如果我们要在微信小程序中使用转换后的 base64 编码，我们需要将该编码插入到 wxml 或者 wxss 中。这个过程可以通过以下步骤来完成：
- 在 wxml 或者 wxss 中定义一个包含 background-image 或者 background 属性的元素，例如：
<view class="background"></view>
- 在 wxss 中定义该元素的样式，例如：
.background {
background-image: url(data:image/png;base64,iVBORw0KGg....);
/* 这里省略了大量的 base64 编码 */
}其中的 data:image/png;base64, 是必须的，因为它告诉微信小程序该字符串是一个 base64 编码的图片。
- 将转换后的 css 文件拷贝到项目中，并在需要使用的 wxml 或者 wxss 中引入该文件，例如：
@import "path/to/output.css";
现在，我们就已经成功地将 css 文件转换成了 base64 编码，并在微信小程序中使用了它。同时，wx-css2base64 也为我们省去了大量手动编码的工作，让我们的开发效率得到了极大提升。
示例代码
下面是一个示例代码，它将一个 css 文件转换成 base64 编码，并在 wxml 中使用了它。
默认的 index.css 文件内容为：
.background {
background-image: url('./image.jpg');
}我们可以使用以下代码将它转换成 base64 编码：
wx-css2base64 index.css output.css
转换后的 output.css 文件内容为：
.background {
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJ....);
}最后，在 wxml 中引入 output.css 文件：
<import src="output.css" /> <view class="background"></view>
至此，我们已经成功地将一个 css 文件转换成了 base64 编码，并在微信小程序中使用了它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005745181e8991b448ea020