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

Question

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

如何配置 postcss/rollup 以将 CSS url(...) 的实例替换为数据 URI，从而将 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
        }),
      ],
    }),
  ],
};

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

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

How to replace url(...) in rollup'd CSS with data URI?

javascript

css

bundling-and-minification

rollupjs