Styling with Sass

In this section, we will learn how to implement Sass styling in our Gatsby project:

1. To start using Sass, we will need to install it along with a few other dependencies. Open a terminal at the root folder of your project and run the following:

   npm install sass gatsby-plugin-sass

   Here, we are installing the core Sass dependency as well as the Gatsby plugin that integrates it.

2. Modify your gatsby-config.js file with the following:

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

   Here, we are updating our Gatsby configuration to let Gatsby know to make use of the gatsby-plugin-sass plugin. Now, create a styles folder inside your src directory.

3. Create a global.scss file in your styles folder and add the following:

   html {
     background-color: #f9fafb;
     font-family: -apple-system, "Segoe UI", Roboto,
       Helvetica, Arial, sans-serif,
       "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI
       Symbol&quot...