Change Sass module variables in react

Question

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.

B. Mélicque · Accepted Answer · 2022-07-04 16:47:34Z

1

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...

answered Jul 4, 2022 at 16:47

B. Mélicque

1461 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

Change Sass module variables in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related