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.
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.
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.
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.
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:
Top comments (5)
How about when we try to @import a .scss file into another? Shouldn't we be using scss-loader for that?
Can't wait to try this out! ❤️ Awesome guide Molly.
Thanks, Molly. This was quite helpful!
Thank you molly! Helped me a lot!
This was really helpful! Thanks Molly.