Use Sass on Gatsby site

Published on September 9th, 2019

sass icon

What? Sass in 2019? Isn’t that old? Well, it isn’t fancy new bleeding edge web technology, but it’s very useful and I love it. So here is how to let Gatsby know you want to use Sass on your website.

First thing you have to do is install Gatsby plugin for Sass and Sass itself.

yarn add node-sass gatsby-plugin-sass

…and add it to plugins array in gatsby-config.js.

module.exports = {
  // ...
  plugins: [
    // ...
    'gatsby-plugin-sass'
    // ...
  ]
}

That’s all you have to do! Can’t get any easier than this.

Now you can import scss or sass files in components that need them.

import './path/to/styles.scss'