Why CSS file is not loaded in the react app

Question

I am building a very simple react app. Everything works fine except the CSS file is not loaded, where is the problem?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="/animal_fun_facts/src/styles.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="/animal_fun_facts/src/index.js"></script>
    <script src="/app.compiled.js"></script>
  </body>
</html>

This is the file structure:

Does this answer your question? [How to import a CSS file in a React Component](https://stackoverflow.com/questions/39853646/how-to-import-a-css-file-in-a-react-component) — Abdelrahman Hatem, Jul 29 '21 at 00:20
Static assets you need to put into public folder, if you are going to reference it that way. Otherwise as the other comment suggested you need to import it into a component. — Alexander Staroselsky, Jul 29 '21 at 00:20

score 2 · Answer 1 · answered Jul 29 '21 at 02:35

You can use so many ways actually Like css modules,
Since you have created your stylesheet In a separate file, then let's just import it in your application Use the following :

import React from 'react';
import ReactDOM from 'react-dom';
import './animal_fun_facts/src/styles.css';

score 0 · Answer 2 · answered Jul 29 '21 at 03:33

Since your CSS is in the same folder as your HTML file, change your CSS href location to:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="/index.js"></script>
    <script src="/app.compiled.js"></script>
  </body>
</html>

(Note: Ideally, all your HTML files should be placed in the public folder)

If you are using Visual Code, as you press the backslash key, a list of files in the current folder will be shown so you can locate your css or js files easily.

Why CSS file is not loaded in the react app

2 Answers2