Implementing a CSS Reset in GatsbyJS

Question

I'm new to GatsbyJS and have been combing the documentation for a solution, but can't seem to find one, which makes me think that I'm missing some larger piece. I assumed the way to eliminate browser-default styling would be to import some sort of a css-reset.css file in my index layout and overwrite it with my own styles, along these lines:

import React from 'react';

import reset from './reset.module.css';
import styles from './index.module.css';

but I can't seem to overwrite them this way (only the reset is implemented). Is there something fundamental about GatsbyJS's build process that I'm missing here? Something I need to integrate into the gatsby-config file? Is there a plugin that does this/a better means of achieving the CSS reset? Thanks for the help.

Answer 1

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;
};

Answer 2

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.