8

By default, GatsbyJS is pushing the use of css modules and custom css-in-js libraries like glamorous and typography

Unfortunately, I am porting an existing site to GatsbyJS that uses traditional global style sheets. The effort to convert all the existing HTML-CSS instrumentation to CSS modules is a chore.

My current hack is to update the GatsbyJS html.js and add a

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

To the header. I have style.old.css living in /public this, however, gets wiped out when a build is run.

I was hoping there would be a plugin to support this but seems the Gatsby team is discouraging global CSS which is understandable for fresh projects.

I attempted to write a plugin to add this but found limited resources on how to write a "style plugin".

kevzettler
  • 4,783
  • 15
  • 58
  • 103

1 Answers1

9

You're close!

Instead of placing style.old.css in /public, place it in /layouts. Then, simply import it into /layouts/index.js like this:

import './style.old.css'

When you start a new gatsby project (gatsby new project-name), you'll notice an index.css file in the /layouts folder, which is imported into layouts/index.js by default. Just follow this example to add your own global stylesheets.

In general, you should not place anything in /public directly. If you'd like static files to end up in the /public folder, create a /static folder and place them there (Gatsby will copy any files in /static to /public for you).

ooloth
  • 345
  • 4
  • 14
  • This is a nice and clean solution. If you only need some rules from the stylesheet and don't want to bundle the whole thing in in you can also use a solution like https://github.com/glortho/styled-import (note: i am the author!) – glortho Dec 21 '18 at 15:18