Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reference file in public folder from CSS in create-react-app

Tags:

I am using creat-react-app (CRA) and simply want to include a png file placed in the public folder via CSS (I keep all image files there). Now I am trying to reference this image via CSS (I only added the background-image line to a freshly generated CRA app):

.App-header {   background-color: #222;   height: 150px;   padding: 20px;   color: white;   background-image: url("../public/example.png"); } 

You attempted to import example.png which falls outside of the project src/ directory

How do I reference the image file from within the CSS-file without copying somewhere inside /src? I also don't want to eject the application and get rid of the error message.

Edit: This question is different from The create-react-app imports restriction outside of src directory because it does not show how to solve this problem at a CSS level. The proposed solution is to add the style inside the JavaScript file which I don't want to do.

like image 359
Hedge Avatar asked Feb 17 '18 13:02

Hedge


People also ask

How do I reference a public folder in React?

To reference assets in the public folder, you need to use an environment variable called PUBLIC_URL . Only files inside the public folder will be accessible by %PUBLIC_URL% prefix.

Where do I put the CSS file in create React app?

You can create a new CSS file in your project directory and add your CSS inside it. You can then import it in your component, class or React JS page.


2 Answers

Just use a / before the name, this will make it relative to the output root, which includes anything in the public folder (provided the finished hosted application is served at the root of a domain).

so for the question asked above:

.App-header {   background-color: #222;   height: 150px;   padding: 20px;   color: white;   background-image: url("/example.png"); } 

the critical part being

/example.png  

refers to a file, example.png, that is in the public folder (served at the root level)

Could also be relative:

one could also use

./example.png 

provided that the css file was also imported from the public/build directory, this would be relative to the css file and not depend on being served at the domain root, but typically in CRA webpack will bundle the CSS and it may or may not be loaded from this location. (you could import it in the html file directly using rel tag with the %PUBLIC_URL%/Styles.css macro)

like image 146
DiamondDrake Avatar answered Sep 19 '22 19:09

DiamondDrake


In my case, to access the images from css/scss, had to move the images directory as well as fonts, to the src directory. After which i was able to refer them in the css/scss files directly,

 background-image: url("/images/background.jpg"); 

references:

https://github.com/facebook/create-react-app/issues/829

https://create-react-app.dev/docs/using-the-public-folder/

like image 22
Sasi Kumar M Avatar answered Sep 21 '22 19:09

Sasi Kumar M