CSS file won't load in React JS

Question

This is how my folder looks like.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible">
        <link rel="stylesheet" href="../src/App.css">
        <title>Document</title>
    </head>

    <body>
        <div id="practice"></div>
        <div id="farm"></div>

    </body>
</html>

And this is the code, but still React won't track the path from the HTML. CSS file won't be loaded even the path is correct.

I can open the file by clicking CTRL + LMB in VSC like a GIF above. For testing, I changed the path as ./src/App.css then VSC couldn't open it because the path is wrong.

Why it keeps happening and are there any ways to fix this problem?

Thanks to listen.

Roel John · Accepted Answer · 2019-12-10 11:03:09Z

1

You should import your css in app.js or any js file on your src folder instead calling it on public folder. You should see it on the app.js since I think you using create-react-app so you should see some example on that js file. You doing it wrong.

If you really want to do that did you try to add %PUBLIC_URL%/src/App.css ?

import '../src/App.css'

edited Dec 10, 2019 at 11:03

answered Dec 10, 2019 at 10:54

Roel John

1042 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sniffingdoggo Over a year ago

Oh I removed %PUBLIC_URL% something in the HTML for practice. Maybe that could be the reason. Thank you for answering.

Collectives™ on Stack Overflow

CSS file won't load in React JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related