如何将rollup'd CSS中的url(...)替换为数据URI？

Question

使用rollup和postcss插件，我可以将CSS注入到我的bundle中。但是，我的CSS引用了一些图片文件，例如：. background-image: url(./images/my-image.svg);.

我如何配置postcssrollup来替换CSS的实例？url(...) 的数据URI，从而将SVG嵌入到bundle中？

Answer 1

你可以使用 postcss-url 插件来实现这一目的。

安装 postcss-url 插件到你的项目中，并将其添加到你的rollup配置中的postcss插件数组中。

const url = require("@rollup/plugin-url");
const postcss = require("rollup-plugin-postcss");

export default {
  plugins: [
    postcss({
      plugins: [
        url({
          url: "inline", // enable inline assets using base64 encoding
          maxSize: 10, // maximum file size to inline (in kilobytes)
          fallback: "copy", // fallback method to use if max size is exceeded
        }),
      ],
    }),
  ],
};

你可以根据自己的需求定制回退机制。