Using Sass in Gatsby
Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. In Gatsby, Sass code can be translated to well-formatted, standard CSS using a plugin.
Sass will compile
.scss files to
.css files for you, so you can write your stylesheets with more advanced features.
Note: the difference between using a
.scssfile is the syntax that you write your styles in. All valid CSS is valid SCSS as well so it is the easiest to use and most popular. You can read more about the differences in the Sass documentation.
This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the Quick Start guide, then come back.
- Install the Gatsby plugin gatsby-plugin-sass and
sass, a required peer dependency as of v3.0.0.
npm install sass gatsby-plugin-sass
- Include the plugin in your
Note: You can configure additional plugin options like paths to include and options for
- Write your stylesheets as
.scssfiles and require or import them as normal.