How to import CSS from the public folder in React

#react

Last updated on Nov 7, 2020 by Suraj Sharma



In this tutorial, you will learn to import a CSS file from the public folder in React.


In my previous post, I wrote about how you can import a background image from the public folder.


create-react-app stores the absolute path of the public folder in the %PUBLIC_URL% variable.


Hence, inside the index.html file you can use <link /> tag to include a css file in your React app.



<link rel="stylesheet" href="%PUBLIC_URL%/style.css"  type = "text/css" />

Unfortunately, we can not import a css file from the public folder into a JavaScript file (React components).


To import a css file in React components you have to move your style.css file to the src folder and import the file in App.js like this



import './style.css';


Related Solutions



Suraj Sharma is a JavaScript Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.