Parcel 打包时为啥找不到我的 CSS 文件？

W″艺涵提问于 2026-03-02 16:25:22 阅读 7

前端

我用 Parcel 启动项目后，HTML 里引入的 CSS 文件一直报 404，明明路径是对的啊！

我的 HTML 是这样写的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="./styles/main.css" rel="external nofollow"  />
</head>
<body>
  <h1>Hello</h1>
</body>
</html>

文件结构是 index.html 和 styles/main.css 在同一级目录下，但控制台一直提示 GET http://localhost:1234/styles/main.css 404，Parcel 到底是怎么解析静态资源路径的？

我来解答赞 4 收藏

反馈

2 条解答

书錦 Dev Lv1

兄弟，你确定文件结构没搞错？你说 index.html 和 styles/main.css 在同一级目录，那 main.css 是直接在根目录还是真的在 styles 文件夹里？

省事的话，直接检查两件事：

第一，确保你的文件结构真的是这样：

project/

├── index.html

└── styles/

    └── main.css

第二，Parcel 启动命令要指定入口 HTML 文件：

npx parcel index.html

如果结构没问题，路径也不用改，./styles/main.css 是对的。Parcel 会自动处理 HTML 里引用的资源，404 大概率是你启动方式不对或者文件真的不在那个位置。

2026-03-02 19:05

Tr° 亚楠 Lv1

看你这情况，大概率是启动命令或者文件结构的问题，Parcel 没正确识别到入口文件。

先确认下你的文件结构是不是这样的：

project/

├── index.html

└── styles/

    └── main.css

如果是的话，问题可能出在你启动 Parcel 的方式上。

你得指定入口文件启动，别光敲个 parcel 就完事了：

npx parcel index.html

或者如果你有 package.json，把源文件放 src 目录下会更规范：

project/

├── src/

│   ├── index.html

│   └── styles/

│       └── main.css

└── package.json

然后启动命令改成：

npx parcel src/index.html

还有个坑，如果你之前折腾过配置，把 .parcel-cache 和 dist 目录删了重新跑一遍，缓存这玩意儿经常搞事情：

rm -rf .parcel-cache dist

npx parcel index.html

另外检查一下你的 CSS 文件名是不是真的叫 main.css，别是什么 main.css.txt 或者大小写不对，这种低级错误我以前也踩过，找半天。

跑起来后访问 http://localhost:1234，CSS 应该就能正常加载了。

2026-03-02 17:06