Before we move forward, let me mention that my site now may look slightly different from yours from now on. Because I’ve removed all the starter content and replaced with my own. Furthermore, I’ve stripped off nearly all existing CSS so that I will use my own. You don’t have to do that right now. Instead, I’ll tell you what to add or remove along the way.
Because layout is also a React component, you can style it with(or without) any styling framework you prefer. This means you may use pure CSS, Sass, CSS-in-JS, styled components, etc.
One reason to use CSS modules with Gatsby is that the scoped class names work very well with the component-based mindset, which is a default with React.
To use Sass + CSS Modules with Gatsby, we need to name our stylesheet to end with module.scss. Let’s go ahead rename the current index.css to s.module.scss for our layout.
Styling
Add Sass
$ yarn add sass gatsby-plugin-sass// in gatsby-config.jsplugins: [ { resolve: `gatsby-plugin-sass`, options: { implementation: require("sass"), }, },]CSS Modules
Using SASS + CSS Modules with Gatsby
// src/layout/s.module.scss
// ...other styles