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?
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.
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.
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.
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
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: