Share class name between JavaScript and SASS with Webpack?

Question

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

Im already sharing an integer this way:

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 a variable with this in my SASS:

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

However this in my JS doenst work. I assume its because parseInt is for integers.

const animationClass = parseInt(styles.animationClass);

Answer 1

Doh! It was really simple:

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

import styles from './styles.scss';
const animationClass = styles.animationClass;