5

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.

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Neil Kelsey
  • 811
  • 4
  • 13
  • 31
  • If you want to render your CSS in a non-React way then you should expose the CSS file and load it like a normal file. – Dave Newton May 31 '17 at 13:52
  • "this seems messy and just plain wrong" is not true at all. Combining css into a js file means your app will be making one less request to fetch the css. Depending on the size of your app, that could be a significant performance improvement. – Chase DeAnda May 31 '17 at 14:48
  • Hey Chase DeAnda - I wasn't completely clear with that statement, I was talking about dumping out the entire stylesheet as an inline element feeling messy and not about combining CSS the React / JSX way ... I explain further in to my question the error I was having, hope that makes sense – Neil Kelsey May 31 '17 at 14:55
  • If you don't want inline CSS in your HTML file, use `extract-text-webpack-plugin` to pull out your imported CSS rules into a separate file. This is a common workflow in React projects. – lux May 31 '17 at 15:16

1 Answers1

1

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

<link rel="stylesheet" href="/style/mystyle.css" />
Drum
  • 505
  • 1
  • 5
  • 22
  • 1
    Ok yes I think adding a link to the CSS outside of React does seem like the best solution I can see right now - cheers! – Neil Kelsey May 31 '17 at 14:24