Django部署Heroku时git push推送CSS文件失败问题求助

• 我正尝试将一个Django Web应用部署到Heroku服务器。

• 使用git push heroku main命令推送代码时，无法将CSS文件同步到Heroku服务器。
• 若将CSS文件从静态文件夹中移除，整个推送流程可正常完成。

• 我已完成whitenoise的安装配置。

推送时返回的完整错误日志如下：

remote: -----> Installing SQLite3
remote: -----> Installing requirements with pip
remote: -----> $ python manage.py collectstatic --noinput
remote:        Post-processing 'CSS/style.css' failed!
remote:        Traceback (most recent call last):
remote:          File "/tmp/build_31834d76/manage.py", line 10, in <module>
remote:            execute_from_command_line(sys.argv)
remote:          File "/app/.heroku/python/lib/python3.9/site-packages/django/core/management/__init__.py", line 419, in execute_from_command_line
remote:            utility.execute()
remote:          File "/app/.heroku/python/lib/python3.9/site-packages/django/core/management/__init__.py", line 413, in execute
remote:            self.fetch_command(subcommand).run_from_argv(self.argv)
remote:          File "/app/.heroku/python/lib/python3.9/site-packages/django/core/management/base.py", line 354, in run_from_argv
remote:            self.execute(*args, **cmd_options)
remote:          File "/app/.heroku/python/lib/python3.9/site-packages/django/core/management/base.py", line 398, in execute
remote:            output = self.handle(*args, **options)
remote:          File "/app/.heroku/python/lib/python3.9/site-packages/django/contrib/staticfiles/management/commands/collectstatic.py", line 187, in handle
remote:            collected = self.collect()
remote:          File "/app/.heroku/python/lib/python3.9/site-packages/django/contrib/staticfiles/management/commands/collectstatic.py", line 134, in collect
remote:            raise processed
remote:        whitenoise.storage.MissingFileError: The file 'CSS/images/mobile-app.png' could not be found with <whitenoise.storage.CompressedManifestStaticFilesStorage object at 0x7f8a24943cd0>.
remote:        The CSS file 'CSS/style.css' references a file which could not be found:
remote:          CSS/images/mobile-app.png
remote:        Please check the URL references in this CSS file, particularly any
remote:        relative paths which might be pointing to the wrong location.
remote:
remote:  !     Error while running '$ python manage.py collectstatic --noinput'.
remote:        See traceback above for details.
remote:
remote:        You may need to update application code to resolve this error.
remote:        Or, you can disable collectstatic for this application
remote:
remote:           $ heroku config:set DISABLE_COLLECTSTATIC=1
remote:
remote:        https://devcenter.heroku.com/articles/django-assets
remote:  !     Push rejected, failed to compile Python app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !       Push rejected to trichhpali.
remote:
To https://git.heroku.com/trichhpali.git
 ! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/trichhpali.git'

感谢大家的帮助 🤗

问题根因 #

报错直接指向CSS/style.css中引用的CSS/images/mobile-app.png文件不存在，Django在执行静态资源收集命令collectstatic时找不到对应资源，导致流程中断，推送被拒绝。

解决方案 #

• 检查本地静态目录结构，确认CSS/images/mobile-app.png文件真实存在，且没有被.gitignore规则忽略，已经提交到git仓库中
• 修正CSS中的相对路径：如果你的静态目录下css和images是平级目录，那style.css中引用图片的路径应该写为../images/mobile-app.png，相对路径是相对于style.css自身所在目录，不是静态根目录
• 临时推送方案：如果需要先完成部署再调整资源问题，可以执行heroku config:set DISABLE_COLLECTSTATIC=1关闭自动收集静态资源的步骤，再次推送即可成功
• 提前验证：修改完成后先在本地执行python manage.py collectstatic --noinput，确认没有报错后再推送到Heroku，可避免推送失败

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