How to add normalize.css to Gatsby
October 15, 2019
Normalize.css is a set of CSS rules used to make all browsers render things consistently. Since all browsers come with their own âbaseâ styles that can vary slightly, itâs useful for making sure that your CSS styles look the same in every browser and smoothes over any inconsistencies between browsers.
To add it to your Gatsby site, first install the normalize.css
npm package using the command line:
npm install normalize.css
Then, import the stylesheet to any Gatsby page you want to use it on:
import React from "react"
import "normalize.css"
export default () => {
return (
<div>the page is here</div>
)
}
Youâll need to do this on every page that you want to use normalize.css on. You can make this less tedious by adding it to the template that multiple pages use (more information can be found in Gatsbyâs documentation), or by adding it to a shared component that all pages import and use.
Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects Iâm working on.