Django 在 css 文件中的 url() 上寻找错误的路径

Question

我正在尝试建立一个使用 Django 并托管在 Heroku 中的个人博客。你可以在这里查看：https://generic-blog.herokuapp.com/

在我决定将静态文件存储在 AWS S3 上之前，我的所有静态文件都按预期加载到本地计算机上。我将我的 settings.py 配置为使用 S3，并使用python manage.py collectstatic 将静态文件收集到我的 s3 存储桶中。静态文件正在按预期加载，但在我的 css 文件中有 url()，其相对路径如下：

url("../fonts/blog.woff") format("woff")

没有加载，因为路径不正确。我的浏览器控制台出现以下错误：

downloadable font: download failed (font-family: "blog" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: https://personal-django-blogs.s3.amazonaws.com/fonts/blog.woff

Django 尝试搜索字体的路径错误 https://personal-django-blogs.s3.amazonaws.com/fonts/blog.woff 必须是 https://personal-django-blogs.s3-sa-east-1.amazonaws.com/static_root/vendor/font-awesome/fonts/fontawesome-webfont.woff

我可以将每个相对路径替换为 s3 存储桶中文件的绝对路径，但这感觉不对。我认为问题出在 settings.py 中，但我无法理解为什么在 s3 上工作时相对路径不再起作用。

这是我的 settings.py 相关配置：

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]
# Path to venv
VENV_PATH = os.path.dirname(BASE_DIR)

# Path for collectstatic to store files
STATIC_ROOT = os.path.join(VENV_PATH, 'static_root')

# User uploaded files
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(VENV_PATH, 'media_root')

DEFAULT_FILE_STORAGE = 'blog.s3_storages.MediaStorage'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3StaticStorage'

Answer 1

CSS url() 不被 Django 静态文件处理，而是直接从浏览器调用

由于您使用的是相对路径，因此需要解析路径值。如果您有多个部署，则需要对此 CSS 文件进行一些预处理以将存储桶名称设置为 URL，或者将其设置为绝对存储桶路径