Styling with Sass
In this section, we will learn how to implement Sass styling in our Gatsby project:
- To start using Sass, we will need to install it along with a few other dependencies. Open a terminal at the
rootfolder 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.
- Modify your
gatsby-config.jsfile 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-sassplugin. Now, create astylesfolder inside yoursrcdirectory. - Create a
global.scssfile in yourstylesfolder 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"...