In this section, we will learn ho

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
   Styling with Sass 37
   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”;
   }
   I rarely add more than HTML styles to the global.scss file. Instead, I prefer
   to import other .scss files into this one. This keeps styles in order and the files
   small and readable. As an example, let’s create typography.scss to store some
   typography styles:
   h1 {
   color: #2563eb;
   size: 6rem;
   font-weight: 800;
   }
   p {
   color: #333333;
   }
   a {
   color: #059669;
   text-decoration: underline;
   }

4. Here, we are adding a color to each and, in the case of the a tags, adding an
   underline to make them more prominent. We can now import this file into our global.scss file:
   @import ‘./typography;
   html {
   background-color: #f9fafb;
   font-family: -apple-system, “Segoe UI”, Roboto,
   Helvetica, Arial, sans-serif,
   “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI
   Symbol”;
5. Navigate to your gatsby-browser.js file and add the following:
   import “./src/styles/global.scss”;
   This tells our Gatsby application to include this style sheet on the client, allowing us
   to make use of it in our application.
   You have now implemented Sass as a styling tool within your Gatsby site. You can
   disregard the other styling implementations that follow and proceed to the Creating
   a reusable layout section.