Implementing a CSS Reset in GatsbyJS

You can import a reset/normalize/other global css imports using gatsby-browser.js. If you have a layout component for consistent theme, you can also import it there as well.

Do this to just include the stylesheet:

import '../styles/myGlobalStyle.css';

There's no need to assign the import to a variable, so do not do this:

import globalStyles from '../styles/myGlobalStyle.css';

For instance, using normalize.css in gatsby-browser.js (v2):

import React from 'react';
import { Provider } from './src/components/Context';

// This next line is all you need to import global styles
import 'normalize.css/normalize.css';

export const wrapRootElement = ({ element }) => {
  const ConnectedRootElement = <Provider>{element}</Provider>;
  return ConnectedRootElement;
};

As an alternative to importing CSS Modules, you can simply import css-reset.css as you first described.

Following the example of the default Gatsby starter, you can place your stylesheets in /layouts and then import them in /layouts/index.js like this:

import ./reset.css
import ./index.css

This will apply your styles globally for you.

Another option with Gatsby is to use Typography.js and apply your global reset styles via the overrideStyles setting.