How to import CSS from the public folder in React

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

• How to conditionally apply class names in React JS

• How to conditionally render React components using React hooks

• How to Disable a Button when an Input field is Empty in React

• How to dynamically set Meta Title Tag in React