Split class name between JavaScript and SASS using Webpack?

Question

How can I share the class name as a variable between my JavaScript and SASS using Webpack?

Im already splitting the integer as follows:

In my SASS:

$animationSpeed: 400; :export { animationSpeed: $animationSpeed; } 

In my JS:

 import styles from './styles.scss'; const animationSpeed = parseInt(styles.animationSpeed); 

I can make the classname variable with this in my SASS:

 $animationClass: item--animating; :export { animationClass: $animationClass; } .#{$animationClass} { // styles here } 

However, this is in my work by JS doenst. I guess it is because parseInt is for integers.

 const animationClass = parseInt(styles.animationClass); 

Answer 1

Doh! It was very simple:

 $animationClass: item--animating; :export { animationClass: $animationClass; } .#{$animationClass} { // styles here } import styles from './styles.scss'; const animationClass = styles.animationClass;