webpack - 使用 Webpack 在 JavaScript 和 SASS 之间共享类名？

Question

如何使用 Webpack 在 JavaScript 和 SASS 之间共享类名作为变量？

我已经通过这种方式共享了一个整数:

在我的 SASS 中:

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

在我的 JS 中:

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

我可以在我的 SASS 中使类名成为一个变量:

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

然而，这在我的 JS 中确实有效。我认为它是因为 parseInt 用于整数。

const animationClass = parseInt(styles.animationClass);

Answer 1

哦!这真的很简单:

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

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