Gatsby V3 - Source maps are not working for the sass example

[iamthefox]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Official example using-sass is not generating source maps on gatsby v3.

Switching versions in package.json to v2 (as well as downgrading sass plugin) fixes the issue.

Reproduction Link

https://github.com/gatsbyjs/gatsby/tree/master/examples/using-sass

Steps to Reproduce

1. Run gatsby develop
2. Open browser
3. Inspect styles

Expected Result

Styles should be pointing to .scss file

Actual Result

Styles pointing to commons.css file

Environment

System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    Yarn: 1.21.0 - ~/.nvm/versions/node/v15.14.0/bin/yarn
    npm: 7.7.6 - ~/.nvm/versions/node/v15.14.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 89.0.2
    Safari: 14.1.1
  npmPackages:
    gatsby: next => 3.10.0-next.1
    gatsby-plugin-google-analytics: next => 3.10.0-next.0
    gatsby-plugin-offline: next => 4.10.0-next.0

Config Flags

No response

[mrazzari]

@iamthefox I'm having the same issue.

Why I think it's a bug

This was a bug in back in Gatsby v1 #778 and fixed, and then reintroduced in Gatsby v2 #6278 and fixed, and now it's here again in v3. Part of a large commit, seems related to the SSR/fast-refresh work but I can't find why it was changed. I guess assuming it would make things faster for dev,

Per the comments in those tickets (and unrelated tickets too) it seems eval just doesn't work for CSS source maps.

Workaround

In your /gatsby-node-js: (from @shelldandy in a #6278 comment)

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage === "develop"){
    actions.setWebpackConfig({
      devtool: `cheap-module-source-map`
    });
  }  
};

[iamthefox]

thank you, that does solves it

[LekoArts]

Hi, thanks for the issue!

We had to choose eval-cheap-module-source-map as we need the original lines for the best error messages and a reasonably quick development save: https://webpack.js.org/configuration/devtool/#devtool

cheap-module-source-map was too slow for us and not worth the trade-off. Please use the onCreateWebpackConfig API to change that individually. Thanks!

[mrazzari]

@LekoArts thanks for the explanation, but I think it's wrong to close this issue.

Per my earlier comment, this was deemed a bug worth fixing in Gatsby 1 & 2.

This bug breaks the official SASS example and the Gatsby docs on SASS.

You're breaking DX for an unknown amount of performance gain. People expect these things to "just work" in a framework like Gatsby.

If the Gatsby team's decision is to keep a bad default, then the workaround should be included in the documentation for the SASS plugin. I spent several hours tracking down the source of this issue. Also it should be documented as a breaking change from Gatsby v2 to v3.

[patriziosotgiu]

The solution proposed by @mrazzari works. Glad I found this.
I agree that this should be documented in the Gatsby docs on SASS as recommended above.