Django静态资源加载异常：style.css及部分JS无法加载求助

Let's work through why your style.css and some JS files aren't loading while other static assets work perfectly. Based on your configuration, here are the most targeted fixes to test:

1. Add Static File Serving for DEBUG Mode #

Right now, your project URL config only handles media files in debug mode, but not static files. Django doesn’t automatically serve assets from STATIC_ROOT in development unless you explicitly map the URL.

Update your project's urls.py to include static file serving:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')),
    path('froala_editor/', include('froala_editor.urls'))
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    # Add this line to serve static files in development
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

2. Fix Static File Discovery Configuration #

Your STATIC_ROOT is set to BASE_DIR/static—this is meant for production, where collectstatic dumps compiled assets. In development, Django looks for static files in:

• The static directory inside each installed app
• Directories listed in STATICFILES_DIRS

If your front/css/style.css lives directly in BASE_DIR/static, tell Django to check this folder during development by adding this to settings.py:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

Pro tip: Avoid storing development static files directly in STATIC_ROOT long-term—collectstatic will overwrite them when you deploy.

3. Validate the {% static %} Template Path #

Your template uses {% static 'front/css/style.css' %}, which means Django expects the file to exist at:

[STATICFILES_DIRS entry or app static folder]/front/css/style.css

Double-check the file exists exactly at that path (remember: paths are case-sensitive on Linux/macOS!).

4. Inspect Browser Network Requests #

Open your browser’s DevTools (F12), go to the Network tab, and reload the page. Look for the style.css request:

• If it returns a 404: The generated URL doesn’t point to an existing file. Cross-reference the request URL with your actual file structure and STATIC_URL setting.
• If it returns a 403: There’s a file permission issue. On Linux/macOS, run chmod -R 644 BASE_DIR/static/front to grant read access to the server user.

5. Clear Browser Cache #

Browsers often cache old 404 responses or outdated asset paths. Try a hard refresh (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac) or clear your browser’s cache entirely.

If none of these resolve the issue, sharing your project directory structure screenshot will help narrow things down further!

内容的提问来源于stack exchange，提问作者George V The Developer