在 React App 中使用 CSS/SCSS 模块的便捷方式答案

【问题标题】：Convenient way to use CSS/SCSS modules within React App在 React App 中使用 CSS/SCSS 模块的便捷方式
【发布时间】：2019-11-27 10:10:08
【问题描述】：

我真的很喜欢 CSS 模块系统以及在 create-react-app 中导入和使用它们的简单方法。我也喜欢像这样在 SCSS 中嵌套类的能力：

.unit {
   .text {
      font-size: 0.8rem;
   }
}

.text {
  color: red;
}

但是如果我将这些样式导入到我的组件中并像这样使用它们......

import styles from './style.module.scss';

<div className={styles.unit}>
  <div className={styles.text}>small... and red!</div>
</div>

<div className={styles.text}>red</div>

...styles.text 显然将是同一个类，并且“单元” div 中的文本将是红色的，所以如果我不想要这种继承，我必须将具有相同名称的类保存在单独的文件中。

我的问题是：我能以某种更好的方式使用它吗？例如我很乐意像这样使用它：

<div className={styles.unit.text}></div>

但也许我缺少更好的内置解决方案或工具？

【问题讨论】：

标签： css reactjs sass

【解决方案1】：

如果你改变了

import styles from './style.module.scss';

到

import './style.module.scss';

它应该可以工作

由于 SCSS（和 CSS！）文件不导出任何内容，因此没有特定的导入内容，因此您希望导入整个文件。

【讨论】：

【解决方案2】：

回答：不要这样做。你应该保持你的样式模块非常小并且只在一个组件中使用。

【讨论】：