SASS/SCSS: @use variables defined to global namespace throwing "Undefined Variable" error

Question

I'm compiling an SCSS file to CSS, using the three following files:

bootstrap/_variables.scss:

$font-color-root: #ff6d00;
$font-color-dark: #000;

themes/_theme.scss:

:root {
    --font-color: #{$font-color-root};
}
 
/* dark theme variables */
[data-theme=\'dark\'] { 
    --font-color: #{$font-colour-dark};
}

style.scss:

//import variables
@use 'bootstrap/variables' as *;

//import CSS files
@use 'themes/theme';

This keeps throwing this error, obviously the variables are not visible within the theme.scss file, how do I make them visible?

I thought that the global namespace would be the solution to this problem.

Error: Undefined variable.
  ╷
2 │     --font-color: #{$font-color-root};
`

Don't combine css variables with sass variables. Just use the sass variable. Also the # outside the css variable call is not needed and will also throw an error. — Nathaniel Flick
@NathanielFlick Unless I am mistaken, CSS and SASS variables perform different functions. The CSS variables are necessary for a light/dark theme. I do not see how separating those from eachother results in a functional light/dark theme CSS file. As for the #{$var} variables, this doc explains that that is necessary for CSS theme variables: sass-lang.com/documentation/breaking-changes/css-vars — JimmyBanks
@NathanielFlick I've already posted the solution that uses the variables formatted as shown, and as explained in the documentation to be correct. — JimmyBanks

JimmyBanks JimmyBanks · Accepted Answer · 2020-12-04T17:10:47

I have identified the solution:

Bootstrap/Main file:

$theme: "default";

//Import CSS file, pass the set $theme using `with ()`
@use 'themes/base_theme' with ($theme: $theme);

_base_theme.scss:

//theme will default to the value set here unless overwritten in the calling file using the `with` language construct
$theme: "default" !default;    

//gets vars with theme specified
@use '../bootstrap/variables' as vars with ($theme: $theme);

:root {
    --font-color: #{$font-color-root};
}

/* dark theme variables */
[data-theme=\'dark\'] { 
    --font-color: #{$font-colour-dark};
}

_variables.scss:

//Set Initial SCSS Variables
$theme: "default" !default;


$font-color-root: #000;
$font-color-dark: #fff;

//if theme is set to "not_default", change values
@if $theme == "not_default" {
    $font-color-root: #fff;
    $font-color-dark: #000;
}

To summarize: the default file calls a theme file, within the theme file, the required variables are imported using the @use language construct. @use can be coupled with with () to overwrite default variable settings (in this case $theme can be overwritten).

SASS/SCSS: @use variables defined to global namespace throwing "Undefined Variable" error

1 Answers