React & SCSS: SassError: Undefined variable

Question

I am developing a React application and I have SCSS file where I have defined some variables:

variables.scss:

$source-sans-font: Source Sans Pro, serif;
$sidebar-bg-color: #916fdd;
$sidebar-width: 250px;
$icon-bg-color: transparent;
$icon-size: 24px;
$highlight-color: #ffffff;
$breakpoint-lg: 1100px;

In my React componeent I have an other SCSS file which uses this variables:

@use "../../assets/scss/variables";

.headerText {
  font-family: $source-sans-font;
  font-weight: 600;
  font-size: 28px;
  color: #2d2d2d;
  opacity: 1;
  padding-top: 9px;
}

When I try to run the application I am getting this error:

Failed to compile.

./src/components/PortfolioSummary/PortfolioSummary.module.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/PortfolioSummary/PortfolioSummary.module.scss) SassError: Undefined variable: "$source-sans-font". on line 4 of /Users/olcayertas/10n/src/components/PortfolioSummary/PortfolioSummary.module.scss

font-family: $source-sans-font;

---------------^

I am using WebStorm and IDE doesn't give any error for the variables and if I command+click on variables it can go to the definitions.

Environmet: Node: v14.17.0 Npm: 6.14.13 OS: Mac OS X Big Sur

Did you try @import rule instead of @use? I don't suggest you switching to the @import rule, just something to check :) make sure you are using dart-sass as node-sass doesn't work with @use rule. — Mr T
make sure installed node-sass in your project, and use @import instant @use — Md. Abu Sayed
But the SCSS documentation says they will drop to use at-import and suggests to use at-use. sass-lang.com/documentation/at-rules/import — Olcay Ertaş
Md. Abu Sayed bad suggestion - The Sass team discourages the continued use of the @import rule. — Mr T

Ebuka Ebuka · Accepted Answer · 2021-06-09T10:44:18

If you have node-sass installed, I'd suggest you use this snippet below

@import "../../assets/scss/variables";

.headerText {
  font-family: $source-sans-font;
  font-weight: 600;
  font-size: 28px;
  color: #2d2d2d;
  opacity: 1;
  padding-top: 9px;
}

React & SCSS: SassError: Undefined variable

1 Answers