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