SCSS namespaces do not appear to work

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® Core™ 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

[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

[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.