Gatsby: SCSS namespaces do not appear to work

[j-norman]

Description

When using a namespaced resources brought in via the @use rule, dot notation throws a build error.

According to the SASS use guide(https://sass-lang.com/documentation/at-rules/use#loading-members), the following should be possible:

// common.module.scss
$myColor: red;

// SomeComponent.module.scss
@use '../../commonStyles/common.module' as common;

.wrapper {
    color: common.$myColor;
}

// gatsby-config.js
//...
  plugins: [
    'gatsby-plugin-sass',
//...

But, it results in the build error:

ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


    color: common.$myColor;
                ^
      Invalid CSS after "    color: common": expected expression (e.g. 1px, bold), was ".$myColor;"
      in /Users/me/project/src/components/Header/Header.module.scss (line 4, column 18)

File: src/components/Header/Header.module.scss

failed Re-building development bundle - 0.103s

However, if I utilize the global import functionality, I can utilize the 'naked' variable $myColor just fine. By 'global import' functionality, I am referring to this configuration setting:

{
      resolve: 'gatsby-plugin-sass',
      options: {
        data: `@import "${__dirname}/src/commonStyles/common.module";`,
      }
    },

While this works, it seems incorrect to need to put all mixins, variables, etc in the global space - only those that are likely to be used everywhere. I am reporting this here as opposed to StackOverflow because this appears to be a bug - none of the documentation that I could find indicated that my code shouldn't work. If I have simply been an idiot, I apologize in advance.

Steps to reproduce

• Start with a new Gatsby project
• yarn add node-sass gatsby-plugin-sass
• in common.module.scss insert the corresponding code above
• in SomeComponent.module.scss insert the corresponding code above
• run in development mode

my folder structure (I've moved things around a little, but that shouldn't be important):
src
commonStyles
common.module.scss
components
SomeComponent
SomeComponent.module.scss
SomeComponent.js

Expected result

The use of a namespaced variable should work without throwing an error

Actual result

The above error is presented

Environment

System:
OS: macOS 10.15.3
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
Yarn: 1.17.0 - /usr/local/bin/yarn
npm: 6.7.0 - ~/.nvm/versions/node/v11.14.0/bin/npm
Languages:
Python: 2.7.16 - /usr/local/opt/pyenv/shims/python
Browsers:
Chrome: 79.0.3945.130
Firefox: 70.0.1
Safari: 13.0.5
npmPackages:
gatsby: ^2.19.7 => 2.19.7
gatsby-image: ^2.2.39 => 2.2.39
gatsby-plugin-manifest: ^2.2.39 => 2.2.39
gatsby-plugin-offline: ^3.0.32 => 3.0.32
gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21
gatsby-plugin-sass: ^2.1.28 => 2.1.28
gatsby-plugin-sharp: ^2.4.3 => 2.4.3
gatsby-source-filesystem: ^2.1.46 => 2.1.46
gatsby-transformer-sharp: ^2.3.13 => 2.3.13

Thank you

[crock]

It looks like you left out a required dependency of node-sass according to the documentation.
https://www.gatsbyjs.org/packages/gatsby-plugin-sass/?=gatsby-plugin-sass

[j-norman]

It was included. My steps to reproduce did include the installation of this dependency.

Most of the system works, it is _only_ namespaces that appear to not work. SASS variables within the same file work, mixins work, and so on. it is only when an external resource is brought in via the @use directive that things begin to go sideways.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 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. You can also add the label "not stale" to keep this issue open!
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 30 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 reopen 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! 💪💜

[wardpeet]

@use is only available in

Checkout https://www.gatsbyjs.org/packages/gatsby-plugin-sass/#alternative-sass-implementations on how to switch to dart-sass. Make sure you install it by running npm install --dev sass

[wardpeet]

Thank you for opening this, @j-norman

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜