Gatsby Sass Recipe

example-page.js

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"
import "./styles.scss"

const SecondPage = () => (
  <Layout>
    <SEO title="Page two" />
    <h1>Hi from the second page</h1>
    <p>Welcome to page 2</p>
    <Link to="/">Go back to the homepage</Link>
  </Layout>
)

export default SecondPage

sass-recipe.mdx

Setup Gatsby with Sass

Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. In Gatsby, Sass code can be translated to well-formatted, standard CSS using a plugin.

---

Install necessary NPM packages

---

Install the Emotion plugin in gatsby-config.js

---

Sweet, now it's ready to go.

Let's also write out an example stylesheet and page you can use to play with Sass.

---

Read more about Sass on the official Sass docs site:

https://sass-lang.com/documentation

styles.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}