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

【问题标题】：How to replace url(...) in rollup'd CSS with data URI?如何用数据 URI 替换汇总 CSS 中的 url(...)？
【发布时间】：2019-03-04 19:07:21
【问题描述】：

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

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

【问题讨论】：

标签： javascript css bundling-and-minification rollupjs

【解决方案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 是的。我现在已经确定了答案。感谢您指出。