How to use a sass $ declaration in useEffect (jsx?)

Question

I have different styles set in a _variables.scss file. like

$secondary: #ffc500;
$tertiary: #ffdd69;
$quartiary: #fffbed;

I want to use different body colors so I want to change the body background in different pages like so:

        document.body.style.backgroundColor = "red"  });

this works nicely but now i want to use for example $primary instead of 'red' I just can't make it work. does anybody have an idea?

Nino Filiu · Accepted Answer · 2020-06-03 08:04:02Z

1

You can use the sass :export keyword to pass variables from sass files to js files:

// colors.scss
$primary: #123456;
:export {
  primary: $primary;
}

// main.js
import colors from './colors.scss'

colors.primary; // '#123456'

As far as I know this is a non-standard keyword, it is handled by webpack + sass-loader, but not all sass transpilers.

answered Jun 3, 2020 at 8:04

Nino Filiu

18.9k11 gold badges65 silver badges97 bronze badges

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

1 Answer 1