How to import CSS from the public folder in 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.