How to use global css style sheet includes with GatsbyJS

Question

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".

Answer 1

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).