React and SCSS export a variable from scss to react

Question

i am trying to export a color from my .scss file to my React.

colors.scss

:root {
  --color2: #606060;
}

$color: #88b5dd;
$color2: var(--color2);

.export {
 color: $color
 color2: $color2
}

and reading it in my React:

App.js

import {Colors} from './colors.scss'
console.log(Colors.color)
console.log(Colors.color2)

and in the console.log i can see:

#88b5dd
var(--color2)

color2 is not a color, the var(--color2) doesn't get interpolated when im using export anyone knows how to fix this issue ? how can i get the color defined in :root? thanks!

Does this answer your question? [Accessing css variable in JS file](https://stackoverflow.com/questions/48153360/accessing-css-variable-in-js-file) — Arkellys, Apr 28 '20 at 06:15
im not sure how to use getPropertyValue, because i need to pass an element. which element do i pass ? — Gal Shtengel, Apr 28 '20 at 09:57
@GalShtengel define `:root` variables on the top of the file and styles. — Ramin eghbalian, Dec 30 '21 at 21:53

score 0 · Answer 1 · answered Nov 01 '22 at 12:15

I found a solution in this website. Here's the gist, in case the post gets deleted.

Create a modular scss file containing your scss variables, or import them from the original files using @use.

// _globalVars.scss

$mobile-breakpoint: 900px;

// exporterFile.module.scss

@use './globalVars'

$new-variable: red;

:export {
  mobileBreakpoint: globals.$mobile-breakpoint;
  newVariable: $new-variable;
}

As you can see above, the required variables were exported using the :export{} syntax. These can then be imported into a JS or TS file.

import myScssVars from 'exporterFile.module.scss'

console.log(myScssVars); // { mobileBreakpoint: '900px', newVariable: 'red' }

Unfortunately these are imported as a readonly key value string pair. .

If anyone finds out how to get inferred types in this, consider answering my question on this!

score -1 · Answer 2 · answered Apr 28 '20 at 13:15

-1

Edit: found this library react-css-vars and refactor this code to use it with React

answered Apr 28 '20 at 13:15

Gal Shtengel

135
1
1
6

React and SCSS export a variable from scss to react

2 Answers2

Linked