React无法识别SCSS模块化导入样式？原因及实现方法求教

一、两种写法的核心区别 #

• 全局样式写法（第一种）：
  用className="container"时，你写的.container是全局生效的类名。只要在组件里通过import './styles.scss'引入了样式文件，所有使用这个类名的元素都会匹配到对应的样式，类名和你在SCSS里写的完全一致，没有任何编译修改。
• CSS Modules模块化写法（第二种）：
  用className={styles.container}是模块化引用，这种方式会把SCSS里的类名编译成唯一的哈希字符串（比如styles_container_XYZ123），目的是避免不同组件的样式类名冲突。但这种写法需要满足Create React App的特定规则才能生效，不是所有SCSS文件都能这么用。

二、让第二种写法生效的技巧 #

Create React App默认只把文件名带.module.scss后缀的文件识别为CSS Modules。所以你只需要把原来的styles.scss重命名为styles.module.scss，然后正常引入使用即可：

import styles from "./styles.module.scss";
function App() {
  return <div className={styles.container}>app</div>;
}
export default App;

修改后，Create React App会自动处理这个模块化样式文件，styles对象里就能正确拿到对应类名，div也会被赋予编译后的唯一类名，样式就能正常生效了。

额外提示：如果需要在模块化样式里保留全局类，可以用:global()包裹类名，比如：

:global(.global-container) {
  background: red;
}

这样既可以用模块化的方式管理大部分样式，又能按需声明全局类。

内容的提问来源于stack exchange，提问作者ifu66