[gatsby-plugin-sass] Failing to compile any .sass when sassOptions is set

[aericson]

Description

Followed the setup steps but getting syntax errors on the sass file. I've created a very minimal project setup but still can't get it to work.

Steps to reproduce

• Create a project from a starter:
  npx gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
• Make the changes from this commit to add sass support:
  aericson/gatsby-3-sass-bug-report@32ae2d0

You can also clone this repo:
https://github.com/aericson/gatsby-3-sass-bug-report
Or fork the sandbox:
https://codesandbox.io/s/clever-saha-0npj0

Expected result

Should compile the .sass file and the styles be applied.

Actual result

Get an error:

error Generating development JavaScript bundle failed

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected ";".
  ╷
2 │ $primary-color: #333
  │               ^
  ╵
  src/test.sass 2:15  root stylesheet
failed Building development bundle - 38.120s
ERROR in ./src/test.sass
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected ";".
  ╷
2 │ $primary-color: #333
  │               ^
  ╵
  src/test.sass 2:15  root stylesheet
    at processResult (/sandbox/node_modules/webpack/lib/NormalModule.js:598:19)
    at /sandbox/node_modules/webpack/lib/NormalModule.js:692:5
    at /sandbox/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /sandbox/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/sandbox/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /sandbox/node_modules/sass-loader/dist/index.js:62:7
    at Function.call$2 (/sandbox/node_modules/sass/sass.dart.js:91729:16)
    at _render_closure1.call$2 (/sandbox/node_modules/sass/sass.dart.js:80373:12)
    at _RootZone.runBinary$3$3 (/sandbox/node_modules/sass/sass.dart.js:27269:18)
    at _FutureListener.handleError$1 (/sandbox/node_modules/sass/sass.dart.js:25797:19)
    at _Future__propagateToListeners_handleError.call$0 (/sandbox/node_modules/sass/sass.dart.js:26094:49)
    at Object._Future__propagateToListeners (/sandbox/node_modules/sass/sass.dart.js:4543:77)
    at _Future._completeError$2 (/sandbox/node_modules/sass/sass.dart.js:25927:9)
    at _AsyncAwaitCompleter.completeError$2 (/sandbox/node_modules/sass/sass.dart.js:25270:12)
    at Object._asyncRethrow (/sandbox/node_modules/sass/sass.dart.js:4292:17)
    at /sandbox/node_modules/sass/sass.dart.js:13233:20
 @ ./gatsby-browser.js 11:0-25
 @ ./.cache/api-runner-browser-plugins.js 45:10-41
 @ ./.cache/api-runner-browser.js 6:14-53
 @ ./.cache/app.js 13:0-65 28:0-70 32:20-29 45:0-14 99:17-26 144:8-17 28:0-70

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

Environment

  System:
    OS: macOS 11.2.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.11.0 - ~/.asdf/installs/nodejs/15.11.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.0 - ~/.asdf/installs/nodejs/15.11.0/bin/npm
  Languages:
    Python: 3.9.2 - /Users/aericson/.asdf/shims/python
  Browsers:
    Chrome: 89.0.4389.72
    Edge: 89.0.774.45
    Firefox: 86.0
    Safari: 14.0.3
  npmPackages:
    gatsby: ^3.0.1 => 3.0.1 
    gatsby-plugin-feed: ^3.0.0 => 3.0.0 
    gatsby-plugin-gatsby-cloud: ^2.0.0 => 2.0.0 
    gatsby-plugin-google-analytics: ^3.0.0 => 3.0.0 
    gatsby-plugin-image: ^1.0.0 => 1.0.0 
    gatsby-plugin-manifest: ^3.0.0 => 3.0.0 
    gatsby-plugin-offline: ^4.0.0 => 4.0.0 
    gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0 
    gatsby-plugin-sass: ^4.0.2 => 4.0.2 
    gatsby-plugin-sharp: ^3.0.0 => 3.0.0 
    gatsby-remark-copy-linked-files: ^3.0.0 => 3.0.0 
    gatsby-remark-images: ^4.0.0 => 4.0.0 
    gatsby-remark-prismjs: ^4.0.0 => 4.0.0 
    gatsby-remark-responsive-iframe: ^3.0.0 => 3.0.0 
    gatsby-remark-smartypants: ^3.0.0 => 3.0.0 
    gatsby-source-filesystem: ^3.0.0 => 3.0.0 
    gatsby-transformer-remark: ^3.0.0 => 3.0.0 
    gatsby-transformer-sharp: ^3.0.0 => 3.0.0 

[LekoArts]

Hi!

You're trying to use a package there that has been deprecated and hasn't been updated in 3 years. You'll want to use https://github.com/csstools/postcss-preset-env and set the correct options to enable your specific syntax. The error is is about the missing semicolon, so you'll need to change the preset options to support that syntax.

[aericson]

@LekoArts, Thanks for the quick response!

Sorry, I should have cleaned up better, I completely removed that package and I'm still getting the same issue. I've updated the above with the new commit diff, codebox, and environment info.

While debugging I also found that if I do the following changes it will work fine at the expense of not being able to change the precision:

diff --git a/gatsby-config.js b/gatsby-config.js
index e3ef768..62a05c7 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -12,14 +12,7 @@ module.exports = {
     },
   },
   plugins: [
-    {
-      resolve: `gatsby-plugin-sass`,
-      options: {
-        sassOptions: {
-          precision: 8,
-        }
-      },
-    },
+    `gatsby-plugin-sass`,
     `gatsby-plugin-image`,
     {
       resolve: `gatsby-source-filesystem`,

[LekoArts]

I think sass-loader isn't handling setting indentedSyntax correctly when adding options. https://github.com/webpack-contrib/sass-loader#sassoptions

If you add that as an option it should work.

[aericson]

That works! Thanks!

[jslyonnais]

Sass options breaking changes! You need to add sassOptions.

From (example):

{
  resolve: 'gatsby-plugin-sass',
    options: {
      data: `@import "src/styles/main";`,
      includePaths: [
        'src/components',
      ],
    },
},

to

{
  resolve: 'gatsby-plugin-sass',
    options: {
      sassOptions {
         data: `@import "src/styles/main";`,
         includePaths: [
          'src/components',
        ],
      }
    },
},