DEV Community

Molly Nemerever
Molly Nemerever

Posted on

Setting Up Sass in Gatsby Project - 4 Easy Steps

Working on a Gatsby project and want to up your game by utilizing Sass? You've come to the right place, my friend. Below is a guide to get you started with Sass right away! No time like the present - right?

1. Install Plugins & Packages

Up first - install the node-sass package and the Gatsby plugin for Sass through your terminal. Navigate into your Gatsby project and run the following command: npm install --save node-sass gatsby-plugin-sass.

npm install node sass and sass plugin

2. Update Plugins in your Configuration File

Now that you've imported the Sass plugin to your project - be sure to add this into your gatsby-config.js file. You'll see that the react package is already living inside the plugins array, simply add gatsby-plugin-sass to the array and save the file.

adding sass to config file

3. Rename layout.css

Gatsby gives you a default file titled layout.css but now that we are taking advantage of Sass we'll need to revise the file extension. Simply rename the file to include .scss at the end.

rename css file to scss

4. Adjust Import Statement in layout.js

This step is easy - both easy to miss and to complete! Don't forget to adjust the file name of layout.scss in your layout.js file. Whatever you decided you wanted your file to be named in step 4, make sure it matches in layout.js.

adjust import file name to scss in layout.js

And the rest is history! You're ready to start using Sass in your Gatsby project. Run gatsby develop as you work through your styling to see your changes instantly on localhost. Resources provided below for additional insight:

Sass Guide
Gatsby Plugins

Top comments (5)

Collapse
 
therakesh profile image
Rakesh Mandal 🗯️

How about when we try to @import a .scss file into another? Shouldn't we be using scss-loader for that?

Collapse
 
kcarrel profile image
kcarrel

Can't wait to try this out! ❤️ Awesome guide Molly.

Collapse
 
fuchodeveloper profile image
Fredrick Mgbeoma

Thanks, Molly. This was quite helpful!

Collapse
 
neoswf profile image
Shlomi Asaf

Thank you molly! Helped me a lot!

Collapse
 
nevillejodie profile image
Jodie

This was really helpful! Thanks Molly.