gatsby-plugin-sass is not generating sourcemaps

[bobdobbs]

Preliminary Checks

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

Description

gatsby-plugin-sass is not generating sourcemaps

Reproduction Link

https://github.com/bobdobbs/gatsby-sourcemap-test

Steps to Reproduce

To reproduce:

1. Install gatsby with 'gatsby new"

2. During the initiation dialogue, accept all default options

3. Wait for gatsby to create the project

4. After the project has been successfully created, enter the root project directory and run 'npm install gatsby-plugin-sass"

5. After the module has been installed, edit gatsby-config.js to assure that the sass plugin loads:

module.exports = {
  siteMetadata: {
    title: `new`,
    siteUrl: `https://www.yourdomain.tld`,
  },
  plugins: [
`gatsby-plugin-sass`
],
}

6. Create a scss module and import it into a template.

I have this as 'src/pages/index.js':

import * as React from "react"
import { html, body } from '../components/style.module.scss';


// markup
const IndexPage = () => {

  return (
    <div>
      <h1>Gatsby Sourcemap Test</h1>
      <p>Let's see if we can get sourcemaps working.</p>
    </div>
  )
}

export default IndexPage

And I have this as my module:

html {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    height: 100% ;
    margin: 0;
    padding: 0;
    h1 {
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 32px;
    }
}

7. In Chrome or Firefox, inspect an element. The h1 should do.

Expected Result

In the style inspector, I would expect to see the styles described and associated with the source scss file.

Actual Result

Instead, the inspector indicates the stylesheet 'common.css' as the source of the css rules that are being applied to the element. (ie, the h1 tag).

Environment

System:
    OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-4770 CPU @ 3.40GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.18 - /usr/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Firefox: 99.0
  npmGlobalPackages:
    gatsby-cli: 4.9.1

Config Flags

I'm not using any flags in gatsby-config

[graysonhicks]

possible duplicate of #35110 ?

[rodsotdia]

@bobdobbs I'm having the same issue, did you find a workaround?

[bobdobbs]

possible duplicate of #35110 ?

Most probably not. In that report OP says that sourcemaps are being generated and can be seen in common.css.

In my case if I view common.css I see no sourcemaps.

[bobdobbs]

@bobdobbs I'm having the same issue, did you find a workaround?

Hey Rod. Were you able to figure out this out? Or create a workaround?

[rodsotdia]

Hey @bobdobbs, yeah, finally I added an additional setting on the gatsby-node.js file, specifically using onCreateWebpackConfig (API Ref here).

Basically, I added the devtool option like so:

exports.onCreateWebpackConfig = ({ stage, getConfig, rules, loaders, actions }) => {
  actions.setWebpackConfig({
    devtool: "cheap-module-source-map"
  });
}

You can find more about that option in the Webpack docs Adding that I was able to see the sourcemaps correctly. I hope it helps you.

[bobdobbs]

Hey @bobdobbs, yeah, finally I added an additional setting on the gatsby-node.js file...

I can confirm that this works for me. I remain uncertain about why so few people seem to encounter this problem.

I'd usually assume that the issue is me doing something wrong. But I've run tests wherein I've simply set up a Gatsby project by following the official tutorial and this problem exists during every setup.

This will be an obstacle to users who, like me, tend to rely on bundled webpack configs "just working".

I suggest either an alteration to the docs for gatsby-plugin-sass, clearly describing the need for this configuration in the case that sourcemaps are not generated by default.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜