在React应用程序中使用CSS/SCSS模块的便捷方式

我真的很喜欢CSS模块系统以及在CreateReact应用程序中导入和使用它们的简单方式。我还喜欢在SCS中嵌套类的能力，如下所示：

.unit{
.文本{
字体大小：0.8rem；
}
}
.文本{
颜色：红色；
}

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

从“./style.module.scss”导入样式；
小的还有红色！
红色

…styles.text显然将是同一个类，“unit”div中的文本将是红色的，因此如果我不想继承，我必须在单独的文件中保留具有相同名称的类

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

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

如果您更改

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

到

应该行得通

---

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

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

import './style.module.scss';