CODEWITHSUNDEEP
javascriptcssreactjssasscss-variables
Hef
Hef

Reputation: 1430

Change Sass module variables in react

I have a variable in my Card.module.scss and use this code to export it make it available to my React components:

$max-width: 100%;

:export {
    maxWidth: $max-width
}

I import this and the rest of the styles with:

import styles from "../styles/Card.module.scss"

and I'm able to access this value using styles.maxWidth, but I don't know how to change the value.

I know it would be easier to use CSS custom properties, but that would not work in modules, as it would not be a pure selector.

Upvotes: 0

Views: 461

Answers (1)

B. Mélicque
B. Mélicque

Reputation: 146

I don't believe it's actually possible: SaSS is compiled on build into regular CSS, so it makes no sense to try and modify it at runtime. You will probably have to use custom properties...

If anyone more knowledgable can confirm...

Upvotes: 1

Related Questions