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

admin管理员组

文章数量:1287645

Using rollup and the postcss plugin, I am able to inject CSS into my bundle. However, my CSS references some image files e.g. background-image: url(./images/my-image.svg);.

How can I configure postcss/rollup to replace instances of CSS url(...) with data URIs and thereby embed the SVGs inside of the bundle?

Using rollup and the postcss plugin, I am able to inject CSS into my bundle. However, my CSS references some image files e.g. background-image: url(./images/my-image.svg);.

How can I configure postcss/rollup to replace instances of CSS url(...) with data URIs and thereby embed the SVGs inside of the bundle?

• javascript
• css
• bundling-and-minification
• rollupjs

Share Improve this question Follow edited Oct 5, 2018 at 9:16 Roman Pokrovskij 9,7762121 gold badges9696 silver badges153153 bronze badges asked Sep 28, 2018 at 18:54 Josh M.Josh M. 27.8k2727 gold badges130130 silver badges220220 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

You could use postcss-url plugin to achieve this.

Install the postcss-url plugin to your project and add it to the postcss plugins array in your rollup config.

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
        }),
      ],
    }),
  ],
};

You can customize the fallback mechanism based on your needs.

本文标签： javascriptHow to replace url() in rollup39d CSS with data URIStack Overflow