Vite创建的React项目CSS导入失败，HMR报404错误

1. 修正CSS文件导入路径 #

控制台报错显示找不到/src/styles/App.css，但你的App.jsx里写的是import './App.css'，结合目录结构，App.css实际位于src/styles文件夹下，因此需要把导入路径改为：

import './styles/App.css'

2. 修复CSS语法错误 #

你的App.css中线性渐变的最后一个颜色值后多了一个逗号，这会导致CSS解析失败：

/* 错误写法 */
.app {
  background: linear-gradient(
    106.37deg,
    #ffe1bc 29.63%,
    #a5070c 51.55%,
    #d30fc9 90.85%, /* 多余的逗号 */
  );
 height: 100vh;
 display: flex;
}

/* 修正后 */
.app {
  background: linear-gradient(
    106.37deg,
    #ffe1bc 29.63%,
    #a5070c 51.55%,
    #d30fc9 90.85%
  );
 height: 100vh;
 display: flex;
}

3. 优化页面显示（可选） #

为避免浏览器默认样式导致背景显示不全，可在index.css中添加：

body {
  margin: 0;
  padding: 0;
}

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