How can I properly include a css file in my index.html file in React?

Question

I've looked everywhere and can't seem to find an answer. I am building a website with React, and I want to include a stylesheet. My React app has the index.html file and I created a line in the file that says:

<link rel="stylesheet" type="text/css" href="homePage.css">

but React won't load the css. How do I do this properly?

Sidenote: React also doesn't load images. When I put a line of code in my JSX like this:

<a href="./my_resume.pdf"><img id="resume" src="./views/icons/resume_logo.png" /></a>

React won't load the image. Please help, I've been banging my head against my desk about this for a while now.

Thanks in advance.

when you say "React won't import the css", what do you mean? — hackerrdave
– hackerrdave, Commented Jan 20, 2017 at 3:17
Sorry, I should've said load the css. Even though I provide the link, the css is not applied to the html when I visit the page. @hackerrdave — Cameron Payton
– Cameron Payton, Commented Jan 20, 2017 at 3:19
when you visit network tab in dev tools - whats the info for that request? — hackerrdave
– hackerrdave, Commented Jan 20, 2017 at 3:23
I get 3 errors when I inspect saying: Uncaught SyntaxError: Unexpected token < for jquery.min.js:1, bootstrap.min.js:1, and clean-blog.min.js:1 — Cameron Payton
– Cameron Payton, Commented Jan 20, 2017 at 3:44
@CameronPayton Please Select an answer to help others who come across this question — andy wilson
– andy wilson, Commented Aug 9, 2017 at 13:07

andy wilson · Accepted Answer · 2017-07-07 10:02:23Z

3

in your html file all you need to do is a normal link statement

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/journal/bootstrap.min.css" rel="stylesheet" integrity="sha384-1L94saFXWAvEw88RkpRz8r28eQMvt7kG9ux3DdCqya/P3CfLNtgqzMnyaUa49Pl2" crossorigin="anonymous" />

Like so that one is from a website but you can do the same thing with a local one like

<link src="/styles/maincss.css" rel="stylesheet" />

that will work

answered Jul 7, 2017 at 10:02

andy wilson

9705 gold badges16 silver badges40 bronze badges

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

1 Comment

josevoid Over a year ago

this saved my broken UI when doing manual reload on the page, thanks

Obsidian Age · Accepted Answer · 2017-01-20 03:48:00Z

1

The problem is likely with the location of your files and the way in which you're referencing them. For example, is my_resume.pdf in the same folder as index.html? Is homePage.css also in the same folder?

The prefix / is relative to the root directory.

The prefix ./ is relative to the working directory.

The prefix ../ is relative to the parent directory.

For further information regarding relative and absolute URLs, I recommend checking out Coffee Cup's article on the topic.

Hope this helps!

answered Jan 20, 2017 at 3:48

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

Comments

Nam Do · Accepted Answer · 2017-01-20 04:18:24Z

1

Cameron Payton ! can you using relative paths for it. Instead you use absolute paths. Example: http://your-domain/homePage.css and http://your-domain/views/icons/resume_logo.png

I think it will help you. Please get back to me. Thanks !

answered Jan 20, 2017 at 4:18

Nam Do

112 bronze badges

Comments

divyesh gohil · Accepted Answer · 2022-05-11 04:55:37Z

0

If you want to include css in your html, you need to put them in your public folder instead of SRC folder and use '%PUBLIC_URL%' as the path to your css. So it would look something like this:

<link href="%PUBLIC_URL%/homePage.css" rel="stylesheet" />

But, it is highly recommended that you do import the css that you want inside your react component, because your css would get minified and bundled. So you could do something like:

import React, { Component } from 'react';
// ... rest of imports
import './path/to/css/homePage.css'

For more info on this, go to the documentation here.

answered May 11, 2022 at 4:55

divyesh gohil

11 bronze badge

Collectives™ on Stack Overflow

How can I properly include a css file in my index.html file in React?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related