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

Posted 2023-02-19

【中文标题】如何用数据 URI 替换汇总 CSS 中的 url(...)？

【英文标题】：How to replace url(...) in rollup'd CSS with data URI?

【发布时间】：2019-03-04 19:07:21

【问题描述】：

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

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

【参考方案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
        ),
      ],
    ),
  ],
;

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

【讨论】：

您是说const url = require("postcss-url"); 吗？

@avi-software 是的。我现在已经确定了答案。感谢您指出。