Importing a CSS file to a react app in the head

Question

I want to add a link to a CSS file in to my HTML head - as simple as that really. I don't want the CSS inserted inline in to the HTML because that seems horrible.

I've got a bunch of styles I've created that I want to apply to my React app globally - so this seems like a sensible thing to do.

I'm trying to import my styles as so;

import './css/main.css';

When I do this react adds my CSS to the head of my HTML as inline styling .. so actually the app works and looks correct but this seems messy and just plain wrong - I'd much rather link directly to the CSS file.

I did find a similar question about how to add CSS to a react component but not the whole apps head.

Hope that's clear, if anyone can point me to some documentation or explain what I'm doing wrong it would be very much appreciated.

Answer 1

Just grab the file in the HEAD of your HTML doc as normal. e.g.

<link rel="stylesheet" href="/style/mystyle.css" />