default sass does not compile

[joshuacox]

Following the official gatsby docs on sass results in this error:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


$primary-color: #333
             ^
      Expected ";".
  ╷
2 │ $primary-color: #333
  │               ^
  ╵
  stdin 2:15  root stylesheet
      in /tmp/sass-test/src/styles/sassy.sass (line 2, column 15)

File: src/styles/sassy.sass

failed Building development bundle - 2.325s

full asciinema recording of steps to reproduce sass-test.asciinema.gz

There is also a discussion about using sass instead of node-sass that results in the same, with another asciinema file to reproduce the results
sass-test2.asciinema.gz.

The sass file is no different than the basic sass file from the sass docs

[vladar]

I think it's the same as #27842 (comment)

You need to enable indented syntax to make it work:

module.exports = {
  /* Your site config here */
  plugins: [
    { resolve: `gatsby-plugin-sass`, options: { indentedSyntax: true } },
  ],
}

New Major

Also, the new major version of the gatsby-plugin-sass will be published on Jan 5, 2021 that will be based on sass. See #27991

You can try it today by installing gatsby-plugin-sass@next alongside with sass

[joshuacox]

shouldn't this be documented as the sass file given in the official documentation does not work without this option enabled?

[joshuacox]

I've tested this and sure enough the option does work with the node-sass route.

However with the gatsby-plugin-sass@next version I get:

undefined failed

Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'indentedSyntax'. These properties are valid:
   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }

in which case switching back to the normal invocation in gatsby-config.js did the trick.

`gatsby-plugin-sass`,

[jgthms]

You now have to write:

{
  resolve: "gatsby-plugin-sass",
  options: {
    sassOptions: {
      indentedSyntax: true,
    },
  },
},