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?

score 1 · Accepted Answer · answered Jun 03 '20 at 08:04

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.

1 Answers1