Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gatsby Sass Recipe
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

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

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.