部署到vercel时没有发现CSS模块的问题

Question

这是错误日志。我无论如何也无法解决这个问题。在开发阶段一切正常，但在部署阶段就失败了。(

23:12:53.687    Failed to compile.
23:12:53.687    ModuleNotFoundError: Module not found: Error: Can't resolve '../../styles/Homebody.module.css' in '/vercel/workpath0/components/Home'
23:12:53.687    > Build error occurred
23:12:53.688    Error: > Build failed because of webpack errors
23:12:53.688        at /vercel/workpath0/node_modules/next/dist/build/index.js:15:918
23:12:53.689        at runMicrotasks (<anonymous>)
23:12:53.689        at processTicksAndRejections (internal/process/task_queues.js:93:5)
23:12:53.689        at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:3:470
23:12:53.704    npm ERR! code ELIFECYCLE
23:12:53.704    npm ERR! errno 1
23:12:53.707    npm ERR! next_front@0.1.0 build: `next build && next export`
23:12:53.707    npm ERR! Exit status 1
23:12:53.707    npm ERR! 
23:12:53.707    npm ERR! Failed at the next_front@0.1.0 build script.
23:12:53.707    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
23:12:53.714    npm ERR! A complete log of this run can be found in:
23:12:53.714    npm ERR!     /vercel/.npm/_logs/2021-02-24T23_12_53_708Z-debug.log
23:12:53.719    Error: Command "npm run build" exited with 1

Answer 1

一件事是所有.module.css文件都以大写字母开头。有时。但是，您仍然会得到相同的错误。更糟糕的是，对于不同的.module.css文件，这个错误一直发生。所以有时你会发现A.module.css没有找到，而另一次你会发现B.module.css没有找到。

我然后删除node_modules和运行npm i。没有结果;同样的错误。

对我有用的是做一个新的项目:

yarn create next-app

…然后逐个添加旧模块中的所有文件，同时每次重新部署应用程序以检查它是否仍然工作。

这不是很优雅，但它足够快，并且它达到了目的。

Answer 2

git config core.ignorecase false显示我的一些文件名中大小写不匹配。当git将core.ignorecase设置为true时，本地文件名可以与远程文件名不同。

来源:Vercel docs

Answer 3

我能够解决这个问题，添加正确的引用到我的css模块。

例如。

import styles from "./Something.module.css";

import styles from "../Something.module.css";

为模块添加一个相对路径有帮助。

Answer 4

这是一个老问题，但我希望我能帮助别人在未来!

我可以通过将CSS模块文件从子文件夹移到根样式文件夹来解决这个问题。

:

-Styles
--Pages
---FileName.module.css

:后

-Styles
--FileName.module.css

Answer 5

如果您可以将Homebody.module.css更改为homebody.module.css，那应该可以工作。这是首字母大写的问题。