如何用数据 URI 替换汇总 CSS 中的 url(...)？

Question

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

如何配置 postcss/rollup 以url(...)用数据 URI替换 CSS 实例，从而将SVG嵌入到包中？

Answer 1

您可以使用postcss-url插件来实现这一点。

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

const url = require('postcss-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
        }),
      ],
    }),
  ],
};

您可以根据需要自定义回退机制。