how do I use css background-image: url('...') linking to /public directory in razzle v4?

[aforty]

❓Question

I'm using razzle-plugin-less I see that #45 tackled this issue but over 4 years ago. I'm upgrading from v3 where I think this just worked out of the box? I'm wondering how I do this now in v4.

One of my .less files has a background-image: url('/images/example.jpg'); and when I load the site I get the following error:

Failed to compile
./src/styles/styles.less (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/dist/cjs.js??ref--8-2!./node_modules/resolve-url-loader??ref--8-3!./node_modules/less-loader/dist/cjs.js??ref--8-4!./src/styles/styles.less)
Error: Can't resolve '/images/example.jpg' in '/path/to/my/project/src/styles'

[fivethreeo]

background-image: url('../images/example.jpg'); ?

[aforty]

Sorry I forgot to mention that these images are in <project_dir>/public/images so I want them to not be bundled by webpack (they are too large) but just be fetched via http(s). That's why I just have url('/images/example.jpg') because it should just take the absolute path from the root.

Again, this worked in v3.

Also using [email protected] but could easily switch to webpack@5 if it's easier to configure there.

[fivethreeo]

This is the resolve-url-loader that sits between the less and the css loader. So remove that loader from the loader chain for less files. But this will disable the url resolving for all css url()’s not just the absolute ones.

[Saeeda-kh]

Thanks @fivethreeo. it worked for me.

[fivethreeo]

Maybe ~/images/example.png works?

[fivethreeo]

If you put up a simple example on codesandbox I can try fixing it for you :)

[fivethreeo]

https://codesandbox.io/s/razzle-examples-basic-forked-k0xjb

[aforty]

Thanks for your help on this.

Here is the reproduction: https://codesandbox.io/s/razzle-image-background-url-9j5pc?file=/src/App.less

[fivethreeo]

https://codesandbox.io/s/razzle-image-background-url-forked-7vr22 - there :)

[aforty]

Thanks so much for your help!!