variables are not global as they were before? (re-opening #999 with demo repo!)

I previously opened this issue: #998 and #999, I am now re-opening a 3rd time with a demo repo showing the problem.

Bug report

I have recently upgraded from webpack 4 to webpack 5, after doing this, global variables no longer are accessible in imported stylesheets. When I have asked about this, others have tried to tell me things like “@import is an anti-pattern and you should be using @use instead!” …

However, it is impossible to use @use for all situations, such as for example with bootstrap-sass, the documentation says to do:

$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
@import "bootstrap-sass/assets/stylesheets/bootstrap";

This no longer works because $icon-font-path is now (as of Webpack 5) undefined within that import statement.

I have asked questions on StackOverflow and webpack Gitter, and have not gotten any useful responses.

Actual Behavior

ERROR in ./app/javascript/stylesheets/application.scss 1:0
Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> .colorized {
|   color: red;
| }

ERROR in ./app/javascript/stylesheets/base.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
2 │   color: $color;
  │          ^^^^^^
  ╵
  app/javascript/stylesheets/base.scss 2:10  root stylesheet
SassError: SassError: Undefined variable.
  ╷
2 │   color: $color;
  │          ^^^^^^
  ╵
  app/javascript/stylesheets/base.scss 2:10  root stylesheet
    at /Users/patrick/coding/ruby/rails/sass-variable-test/node_modules/sass-loader/dist/index.js:54:16
    at Function.call$2 (/Users/patrick/coding/ruby/rails/sass-variable-test/node_modules/sass/sass.dart.js:96399:16)
    at render_closure1.call$2 (/Users/patrick/coding/ruby/rails/sass-variable-test/node_modules/sass/sass.dart.js:82305:12)
    at _RootZone.runBinary$3$3 (/Users/patrick/coding/ruby/rails/sass-variable-test/node_modules/sass/sass.dart.js:28284:18)
    at _FutureListener.handleError$1 (/Users/patrick/coding/ruby/rails/sass-variable-test/node_modules/sass/sass.dart.js:26806:21)
    at _Future__propagateToListeners_handleError.call$0 (/Users/patrick/coding/ruby/rails/sass-variable-test/node_modules/sass/sass.dart.js:27113:49)
    at Object._Future__propagateToListeners (/Users/patrick/coding/ruby/rails/sass-variable-test/node_modules/sass/sass.dart.js:12137:77)
    at _Future._completeError$2 (/Users/patrick/coding/ruby/rails/sass-variable-test/node_modules/sass/sass.dart.js:26959:9)
    at _AsyncAwaitCompleter.completeError$2 (/Users/patrick/coding/ruby/rails/sass-variable-test/node_modules/sass/sass.dart.js:26618:12)
    at Object._asyncRethrow (/Users/patrick/coding/ruby/rails/sass-variable-test/node_modules/sass/sass.dart.js:11940:17)

Expected Behavior

Sass’ documentation says:

Variables declared at the top level of a stylesheet are global

Therefore, having :

# application.scss
$color: red
@import 'base';

# base.scss
.colorized {
  color: $color;
}

I expect that the variable $color should be available within the base.scss file, since $color should be global as it was declared “at the top”.

How Do We Reproduce?

1: clone the repo: https://github.com/patrick99e99/sass-variable-test

2: npm i

3: RAILS_ENV=development ./node_modules/.bin/webpack --config config/webpack/development.js

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 8.50 GB / 32.00 GB
  Binaries:
    Node: 14.18.1 - /opt/homebrew/opt/node@14/bin/node
    npm: 6.14.15 - /opt/homebrew/opt/node@14/bin/npm
  Browsers:
    Brave Browser: 96.1.32.106
    Chrome: 95.0.4638.69
    Firefox: 93.0
    Safari: 15.1
  Packages:
    sass-loader: ^12.3.0 => 12.3.0
    style-loader: ^3.3.1 => 3.3.1
    webpack: ^5.64.2 => 5.64.2
    webpack-dev-server: ^4.5.0 => 4.5.0
  Global Packages:
    webpack: 5.59.1

[ef4]

@patrick99e99 @use makes the variable available under a namespace. You need something.$color, not $color. If you really want no namespace you can do @use 'something' as *;

[alexander-akait]

We can close it, because we can’t fix it here and yes, please use @use for sass