Create React App中postcss-nested的&符号不生效问题求助

核心问题及修复步骤： #

1. 文件路径不匹配
   你的PostCSS脚本配置的是处理src/styles/main.css并输出到src/index.css，但你把带&嵌套语法的代码写在了index.css里——PostCSS根本没处理这个文件，自然不会解析嵌套语法。

   • 修复：把嵌套代码移到src/styles/main.css中，src/index.css作为自动生成的文件，不要手动修改它。

2. 引入了未编译的CSS文件
   如果App.js里引入的是未经过PostCSS处理的源文件（比如直接引入写了嵌套语法的文件），而不是生成后的src/index.css，浏览器无法识别嵌套语法。

   • 修复：在App.js里确保引入编译后的文件：

     import './index.css';
     

3. PostCSS配置加载异常（可选排查）
   虽然根目录的postcss.config.js会被postcss-cli自动读取，但偶尔会出现加载失败的情况。可以在脚本命令里显式指定配置文件：

   • 修改package.json的scripts：

     "build:css": "postcss src/styles/main.css -o src/index.css --config postcss.config.js",
     "watch:css": "postcss src/styles/main.css -o src/index.css -w --config postcss.config.js"
     

验证方法 #

重启开发服务后，查看src/index.css的内容，正常情况下应该生成如下代码：

.App {
    background-color: #ffffff;
}
.App-header {
    background-color: yellow;
}

如果生成了这段代码，说明嵌套语法已被正确解析，此时页面上的.App-header元素会显示黄色背景。

内容的提问来源于stack exchange，提问作者Магомедсалам