Provides drop-in support for SASS/SCSS stylesheets
npm install --save node-sass gatsby-plugin-sass
How to use
- Include the plugin in your
- Write your stylesheets in SASS/SCSS and require or import them as normal.
// in gatsby-config.jsplugins: `gatsby-plugin-sass`
node-sass is used. To use
npm i -D sass
// in gatsby-config.jsplugins:resolve: `gatsby-plugin-sass`options:implementation:
// in gatsby-config.jsplugins:resolve: `gatsby-plugin-sass`options:includePaths: "absolute/path/a" "absolute/path/b"...
If you need to override the default options passed into
// in gatsby-config.jsplugins:resolve: `gatsby-plugin-sass`options:cssLoaderOptions:camelCase: false
With CSS Modules
Using CSS Modules requires no additional configuration. Simply prepend
.module to the extension. For example:
Any file with the
module extension will use CSS Modules.
PostCSS is also included to handle some default optimizations like autoprefixing and common cross-browser flexbox bugs. Normally you don't need to think about it, but if you'd prefer to add additional postprocessing to your SASS output you can specify plugins in the plugin options
Relative paths & url()
This plugin resolves
url() paths relative to the entry SCSS/SASS file not – as might be expected – the location relative to the declaration. Under the hood, it makes use of sass-loader and this is documented in the readme.
Using resolve-url-loader may provide a workaround, but at present this is not in the build and implementation would demand customisation.
TODO link to a plugin that adds resolve-url-loader
// in gatsby-config.jsplugins:resolve: `gatsby-plugin-sass`options:postCssPlugins:precision: 8
Breaking changes history
node-sassis moved to a peer dependency. Installing the package alongside
gatsby-plugin-sassis now required. Use
npm install --save node-sass
support Gatsby v2 only