Can't load image in css

[alwaysonlinetxm]

I find out that rollup will not load the image url written in css/scss files. Just live below:

.tit {
  ...
  background: url(./images/tit.png) no-repeat;
}

Rollup will just copy the url to the bundle file and do nothing else. So it makes me can't use background in css but only .
I tried to write a plugin to solve this problem, but I find that rollup even will not treat the url as a file but just a string! So I don't know what I can do. Is this a bug of rollup?

[guybedford]

Closing as this has been inactive for a while and newer relevant issues can track these concerns. Happy to continue discussion as well here too.

[channg]

What's going on?

[jchaney01]

I would also like to know how to handle this.

[eakarpov]

Me too..

[lukastaegert]

As Vanilla Rollup only handles JavaScript files, I assume you are using a plugin. If the plugin does not emit a file, you should check with the plugin if this is a known issue, it can be extended, you can make a PR to fix this etc. Rollup does have a file emission API, but if it is not used by the plugin to its full extent, there is little we can do in Rollup.

[IlyaSemenov]

@lukastaegert you're putting it as if CSS with url() were some very rare edge case you haven't even heard of. While your answer is perhaps technically correct, it is pointless for everyone coming here from Google.

I'm for example was beaten by this, too. What seemed to be working with webpack for years, is suddenly 'broken' (I know it's not a correct term) in Rollup. This ticket appears as number 2 for google query "rollup css background image".

Wouldn't it be more nice if instead of 'a plugin' above you referred to a specific plugin which is recommended for this, VERY POPULAR, use case? (it is @rollup/plugin-url? because it's not working for me with CSS either.)

Yes, I understand it's not a support board and not Stack Overflow. But the lack of proper documentation (or lack of functionality, or just bad luck) naturally leads to people landing up here, it's a fact that you can't ignore. (Or, in fact you may..."Lock for collaborators only" is a good solution, ha-ha).

[lukastaegert]

Honestly, I do not know. I would love to be able to help but I have not tried most of the plugins out there. I know what is theoretically possible because I wrote the plugin APIs, but I do not know which plugin does what you want. But there are others who do know. Unfortunately, hardly anyone of them is browsing Rollup issues to see where they can help. Myself, I have a day job and a child to take care of which leave very little time to work on Rollup, and I would love to dedicate this little time to improving Rollup rather than working through support requests for the plugin sphere, because then development will stop. If anyone would turn up writing the support document you wish to be finding, I would love to help you, put the information in a prominent spot where it can be found etc. but these things only very rarely happen. Rollup can only thrive if it is a team effort, and anyone is heartily invited to join in. Documentation is not too difficult to write, but it takes for someone to look at what is needed, do the necessary research and compile it.

[IlyaSemenov]

From what I discovered so far handling CSS assets is simply not supported (at least to the same extent as Webpack).

#2872 seems to be the related ticket.

Apparently manual setup for postcss-smart-asset is the only way to proceed. (Or, use Webpack. Too bad that Webpack is a second class citizen for Svelte).

[eakarpov]

@IlyaSemenov Then what is the purpose of this bundler? If it is not able to bundle an application.

[IlyaSemenov]

@eakarpov Earlier there used to be a rule of thumb: use Webpack for web apps and Rollup for distributable libraries. Now Rollup wants to play on the apps territory but apparently is not yet mature enough. (Disclaimer: just my observations so far, I could be utterly wrong.)

[tivac]

It's not even clear to me what the ask is here.

Do you want images referenced from CSS copied to the output dir? Do you want them base64 encoded?

You seem really put out that rollup isn't prescribing a solution for you but it's not even clear what problem you're trying to solve. Rollup doesn't bundle non JS files by default, but if you reference your CSS via importing it and use a plugin to handle loading those files you can basically do whatever you want with them.

[IlyaSemenov]

I personally would want them copied and named like image.hash.jpg, and referred with a relative path from CSS. That's what constitutes a sane default (unlike keeping urls intact which leads to broken CSS in 99% cases).

Of course one would need a plugin to do so, but which one? In webpack, that's simply file-loader (or its extended version url-loader), it simply works without any setup. Is there a decent rollup counterpart?

You seem really put out that rollup isn't prescribing a solution

And you seem to be forgetting that it's not only about cool pluggable architecture and programmatic flexibility but also actual end users. Saying that one could do whatever he wants if she had a plugin is meaningless as it doesn't get things done. What's the point in good architecture decisions if they are not solving real world problems (as in: convert CSS to production ready deploy)?

[tivac]

Rollup has different defaults, that doesn't make them any less sane.

If you want to use webpack or parcel because you don't have the time or interest in finding a plugin for the behavior you want you definitely should. They're great bundlers and it seems like they might be a better fit for your needs and mindset.

[shellscape]

@IlyaSemenov the tone of what's being written here is getting a bit too intense. let's all of us dial that back down a bit. We're here to help each other

Of course one would need a plugin to do so, but which one?

https://github.com/rollup/awesome is a great place to start. If there's a plugin that's close on that list, but not quite what one needs, one might ask an existing plugin's author to extend a plugin for your use-case. Failing that, https://github.com/rollup/plugins is the repo for all official plugins. A "Feature Request" issue outlining the ask for a new official plugin to address that could be a useful contribution to the project. It would also be awesome if you'd try to jump in and write a plugin to contribute to the project's community.

I also searched NPM for "rollup image" and found this on the first page of results, which appears to do what you're looking for, at least in part: https://www.npmjs.com/package/rollup-plugin-image-files

Rollup has different defaults, that doesn't make them any less sane.

Underrated comment. An interesting observation is webpack v5 removing several of those defaults in favor of allowing users to choose how it should behave, following Rollup's mantra more closely - like removing node-libs-browser by default.

Rollup isn't Webpack. They're different projects solving different problems in different ways. Having expectations of parity between them is a bad approach (as would be parity between Parcel and Rollup, or Parcel and Webpack). Arguing that Rollup should provide everything Webpack does because Webpack exists is not a good approach either.

What's the point in good architecture decisions if they are not solving real world problems (as in: convert CSS to production ready deploy)?

What I feel is being overlooked is that Rollup does solve a litany of real world problems for many, many people. The crux here is that your real world problem doesn't have a straightforward solution. It's reasonable to feel confusion and frustration in that situation. Webpack is well-known for trying to anticipate and provide solutions for any and every user expectation. That's a rarity in software, open source, and something you'll never (or so I'd wager) see offline. It's important to consider that.

I think we've beat this poor horse to death at this point, and participants have provided some good paths for resolution of the needs here. I'd like to ask everyone to let this issue lie peacefully now.