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.

Answer 1

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

Answer 2

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!

Answer 3

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 !

Answer 4

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 .