Create-react-app: How can I use the %PUBLIC_URL% inside CSS files?

[jlubeck]

I tried putting %PUBLIC_URL% directly inside the CSS file but it looks like it just writes that out plain to the url and so doesn't work.

Thanks!

[Timer]

What exactly are you trying to accomplish? You might be trying to over-engineer a solution to your problem.

See https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts.

[jlubeck]

I just want to do this inside my CSS file:
background: url(/assets/images/btn_close_white.png) no-repeat;

from that link, I understood that I need to write it like:
background: url(./assets/images/btn_close_white.png) no-repeat;

But when I do that I get this error:

Failed to compile.

Error in ./src/App.css
Module not found: ./assets/images/btn_close_white.png in /src

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!./src/App.css 6:438-484

[Timer]

Where is your assets directory? Try moving it into src/ instead of public/.

[jlubeck]

Mmmm, yeah, I was about to mention that. But wouldn't that leave me with images in both src and public? Kind of messy... Because in my JS files I was using the images like this:

${process.env.PUBLIC_URL}/assets/images/[email protected]

[jlubeck]

Maybe the proper question would be how to handle images both inside JS file and CSS while keeping them all on the same location? Or is this common to have images laying around in both src and public?

[Timer]

You shouldn't need images in public; the build process will copy images from src/ to build/ at compile time (and update paths accordingly).
All your [tracked] assets should live in src/ and in your JS you should be importing them -- not using process.env.PUBLIC_URL.

For example (with your images in src/assets/images/):
src/app.js

import './app.css'
import landscape from './assets/images/[email protected]'

...

render() {
  return (<img src={landscape} />)
}

src/app.css

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

[jlubeck]

Oh, I see. Thanks for clarifying that concept for me!
Sorry to bother you yet once again, but what would the public folder be used for then?

[gaearon]

For cases when you can't do this for some reason. Like when you want to determine paths dynamically or have thousands of images and can't import them all.

Have you had a chance to read through both sections in User Guide (Adding Images and Using public Folder)? What can we do to improve them to address the confusion you experienced?

[Timer]

The public/ folder is sort of reserved for exceptional cases.
If you don't know why you should use it, you probably shouldn't be using it -- most people won't interact with the public/ folder after changing the title or adding some meta tags.

Some example usage cases:

• You want to include a script which you do not want to be part of your bundle, maybe because it cannot be processed by webpack -- but you don't want to rely on their (or a) CDN. In this case, you would store a copy of the script in public and add a reference to it in your index.html file.
• Including content which shouldn't be processed or needs an absolute location, such as files for progressive web apps.
• edit: or what @gaearon said above

[gaearon]

That's a good explanation. It would be nice to rewrite / tweak those sections to better explain it.

[jlubeck]

Well... before going down that path... this is still not working for me :(
I see the example Timer gave is to import the image and use it inside the render method of the component. But after I copied my images to the src folder, and changed the css to use ./ i'm still getting a compile error...

[gaearon]

Which error?

[jlubeck]

Failed to compile.

Error in ./src/components/AuditQuestions.css
Module not found: ./assets/images/btn_prev.png in /src/components

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!./src/components/AuditQuestions.css 6:287-326

[jlubeck]

mmm maybe I have to do ../assets since i'm in components??

[jlubeck]

Ha! Yes. That was it! Thank you both of you for all your help!

[Timer]

@jlubeck looks like you need to import it as ../assets/images/btn_prev.png instead of ./assets/images/btn_prev.png.

There's an ongoing discussion to allow absolute imports (so you could do something like assets/images/btn_prev.png, but I do not believe it's finalized yet).
Maybe @gaearon can shed some more light on this.

edit: ah, you solved it before I could respond!

[gaearon]

@jlubeck

Can you help me understand how you arrived at the first solution (without trying the import)?

[jlubeck]

First solution? You mean using the ../ instead of ./ ?

[gaearon]

Sorry I wasn't clear. I meant using public folder instead of importing.

[gaearon]

By the way if you do decide to use the public folder later, you don't need to do anything special to CSS. It already supports relative paths out of the box so you could write url(assets/stuff.jpg). It's the leading ./ that "opts it into" Webpack mode.

[jlubeck]

Oh, sorry. I usually go straight to trying things instead of reading the FULL documentation. So probably bad on my behalf.

But, since I saw that the favicon.png was in the public folder, I assumed all static images should go there as well. Although you do have the logo.svg in the src folder, so that should've told me something...

[gaearon]

That makes sense, thanks for explaining.
Let us know if you have any other issues?

[jlubeck]

Will do, and thank you very much for being so helpful even though this stuff was in the docs. Really appreciate it!