Using global SASS variables in React component

Question

Each import of SCSS file in JS file is treated as an isolated SASS env, therefore, there is no such thing "global variables" while using SCSS in React. This behavior requires us to import the variables.scss file into each SCSS file that uses one of the variables.

_variables.scss

$global-font : "Cairo", sans-serif;
$global-background: whitesmoke;

App.js

import './App.scss'

export function App()
{
    return (
        <div className="App"></div>
    )
}

App.scss

@import "variables.scss";

.App {
    background-color: $global-background;
    font-family: $global-font;
    // ...
}

Header.js

import './Header.scss'

export function Header()
{
    return (
        <div className="Header"></div>
    )
}

Header.scss

@import "variables.scss";

.Header {
    background-color: $global-background;
    font-family: $global-font;
    // ...
}

I have to import the _variables.scss file to multiple (maybe 100+) other SCSS files to make use of the variables. Does doing this increase bundle size?

P.S. The variables.scss file contains only SCSS variables and nothing else.

Alexander Nied · Accepted Answer · 2021-05-12 13:40:08Z

4

It shouldn't-- unused variables will simply be removed from the compiled SCSS. From the Sass Variables docs:

Sass variables are all compiled away by Sass.

You can experiment with this on an Online Sass Playground-- open the filesystem UI, add a bunch of unused variables to the _variables.scss, then save, close the filesystem and convert/compile the output-- you'll see that used variables simply have the value replaced where they are used, and unused variables are "compiled away".

answered May 12, 2021 at 13:40

Alexander Nied

13.8k4 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

anonym Over a year ago

Appreciate your answer. Perhaps I failed to explain clearly. My question is that if I import the _variables.scss file to multiple (maybe 100+) other SCSS files to make use of the variables, will it increase bundle size?

Alexander Nied Over a year ago

I understand-- my point is that it shouldn't, because the contents of the _variables.scss itself does not get added to the rendered output-- so if its size contribution is zero, zero multiplied by as many times as you import it will still be zero. The only theoretical possible way it could impact the output I can think of would be the sourcemaps, but that would honestly be surprising to me. Regardless, sourcemaps are also an optional output, and not necessary for production purposes.

anonym Over a year ago

That clarifies it. Thank you!

slumbergeist · Accepted Answer · 2021-05-12 13:49:14Z

3

If its just variables then it won't bloat the output but if your imported files are doing more than that, then it might increase your build output, as per SCSS docs

with @import Each stylesheet is executed and its CSS emitted every time it’s @imported, which increases compilation time and produces bloated output.

I'd suggest using css variables for your globals. Simply declare them once in your main stylesheet that is loaded on entry


:root {
  --var-one: something;
  --var-two: something;
}

and use them anywhere,

  // in stylesheets
  .someclass {
     ...
     font-size: var(--var-one);
   }

   //or even in jsx
   
   <component style={{fontSize: 'var(--var-one)'}} />

answered May 12, 2021 at 13:49

slumbergeist

1,5581 gold badge13 silver badges18 bronze badges

1 Comment

Alexander Nied Over a year ago

Please note that if you decide to go this route you may need to figure out polyfills or fallbacks if IE is a supported browser: caniuse.com/css-variables

Collectives™ on Stack Overflow

Using global SASS variables in React component

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related