React中CSS Modules样式不生效求助（react-scripts 5.0.1）

问题根源 #

你在.module.css文件中使用了Sass风格的嵌套语法（如& > .title），但react-scripts 5.0.1默认的CSS Modules配置不支持解析这类CSS嵌套写法，导致样式无法被正确编译，因此完全不生效。

解决方法 #

方法一：改用Sass文件（最直接）

• 将styles.module.css重命名为styles.module.scss
• 安装Sass依赖：

  npm install sass --save-dev
  # 或使用yarn
  yarn add sass --dev
  

• 修改JSX中的导入路径：

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

• 重启开发服务器，嵌套样式即可正常解析生效。

方法二：用PostCSS插件解析CSS嵌套（无需修改文件后缀）

• 安装postcss-nested插件：

  npm install postcss-nested --save-dev
  # 或使用yarn
  yarn add postcss-nested --dev
  

• 在项目根目录创建postcss.config.js文件，添加配置：

  module.exports = {
    plugins: [
      require('postcss-nested')
    ]
  }
  

• 重启开发服务器，CSS嵌套语法会被正确编译。

额外检查项 #

• 确认全局样式中已定义--red-70和--message-text-size这两个CSS变量，否则对应样式属性会因变量未定义失效。
• 用浏览器开发者工具查看Stack组件的样式，检查是否有组件自带的样式（如height、padding）覆盖了你编写的.rectangle样式。

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