CODEWITHSUNDEEP
htmlcssreactjs
Ibo
Ibo

Reputation: 4329

Why CSS file is not loaded in the react app

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:

enter image description here

Upvotes: 4

Views: 6652

Answers (2)

Ezani
Ezani

Reputation: 555

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.

Upvotes: 0

Zakariya ANAYNE
Zakariya ANAYNE

Reputation: 33

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';

Upvotes: 2

Related Questions