Gatsby Develop Failing using gatsby-plugin-sass

Question

After installing the gatsby-plugin-sass module:

When I try to run gatsby build, I get the following error:

 ERROR 

Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.23, but autoprefixer uses 7.0.26. Perhaps this is the source of the error below.


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Browser queries must be an array or string. Got object.

File: src/indexs.sass

failed Building development bundle - 9.200s

I have been working on a resolution to this for hours. I have tried:

custom webpack rules in gatsby-node.js for sass files
reading, re-reading, and re-re-reading the instruction on gatsby's site
updating PostCSS using npm in every way I know how

So far, nothing has worked.

Why is it so complicated to get sass working with gatsby? When the documentation on gatsby's site makes it seem so easy?

Any suggestions what I can do to get this working?

in gatsby-node.js:

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  // console.log('rules',rules)
  // console.log('rules.css',rules.css())
  // console.log('rules',rules.postcss())
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            // Creates `style` nodes from JS strings
            'style-loader',
            // Translates CSS into CommonJS
            'css-loader',
            // Compiles Sass to CSS
            'sass-loader',

          ],
        },
      ],
    },
    plugins: [
      plugins.define({
        __DEVELOPMENT__: stage === `develop` || stage === `develop-html`,
      }),
    ],
  })
}

In gatsby-config.js:

    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [require(`postcss-preset-env`)({ stage: 0 })],
      },
    },
    `gatsby-plugin-sass`,

the sass import line in gatsby-browser.js:

import "./src/indexs.sass"

score 2 · Answer 1 · answered Dec 13 '20 at 07:47

Using sass instead of node-sass saved my day.

remove node-sass

npm uninstall node-sass
or
yarn remove node-sass

and add sass aka dart-sass

npm install --save-dev sass
or
yarn add sass

then edit gatsby-config.js

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      implementation: require("sass"),
  },
 },
]

now run gatsby develop

:)

score 1 · Answer 2 · answered Jul 17 '20 at 14:14

I'm a bit late to the party but hopefully this might help someone. I have Sass setup and working with Gatsby without to much extra config required.

Install both node-sass and gatsby-plugin-sass via npm.

npm install --save node-sass gatsby-plugin-sass

Include gatsby-plugin-sass in your gatsby-config.js file in plugins: [] as below with any other Gatsby plugins you maybe using.

module.exports = {
    siteMetadata: {
        title: `#`,
        description: `#`,
        author: `#`,
    },
    plugins: [
        `gatsby-plugin-sass`,
    ],
}

Write your styles as .sass or .scss files and import your main styles.scss (or whatever you prefer to name it) either in your main Layout.js file or gatsby-browser.js file as below using the path to the location of your styles.scss file.

import "./src/styles/styles.scss"

I hope this works for you but if you have any other trouble add a comment and I'll try to reply back.

Thank you so much. Quick update: The docs say that node-sass is deprecated and that project should move to Dart Sass https://www.npmjs.com/package/node-sass — C-Dev, Jul 19 '22 at 21:30
Yup, I have updated how I implement since this comment back in 2020. Gatsby has progressed rather fast so I'd say always check their docs. They are awesome docs! — Nikki Pantony, Jul 20 '22 at 22:06

score 0 · Answer 3 · answered Feb 01 '20 at 20:33

I hope someone chimes in on this to show how exactly to set up gatsbys sass plugin. I could not get it to work at all.

But I did find a workaround in my case:

I removed gatsby-plugin-sass from the plugins array in gatsby-config.js, turning it off (but I did not uninstall it using npm)
I installed postcss-node-sass and postcss
I added this info to the plugins array in gatsby-config.js:

    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [
          require(`postcss-preset-env`)({ stage: 0 }),
          require(`postcss-node-sass`)(),
        ],
      },
    },

I added a custom rule for webpack in gatsby-node.js:

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  // console.log('rules',rules)
  // console.log('rules.css',rules.css())
  // console.log('rules',rules.postcss())
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            // Creates `style` nodes from JS strings
            'style-loader',
            // Translates CSS into CommonJS
            'css-loader',
            // Compiles Sass to CSS
            'sass-loader',

          ],
        },
      ],
    },
    plugins: [
      plugins.define({
        __DEVELOPMENT__: stage === `develop` || stage === `develop-html`,
      }),
    ],
  })
}

Gatsby Develop Failing using gatsby-plugin-sass

3 Answers3