Django无法读取带CSS的HTML，登录模板样式错乱求助

Hey there! I see you're working on a Django project as someone who isn't a web dev, and you ran into styling issues when using your custom HTML/CSS for the login template. Your temporary workaround works, but let's get this set up the right way so you don't run into problems later.

Why Your Temporary Fix Isn't Ideal #

Putting your CSS file into project\Lib\site-packages\django\contrib\admin\static is risky:

• Any time you update Django, this directory might get overwritten, losing your custom styles.
• It mixes your project's custom code with Django's core files, making your project messy and hard to maintain.

The Correct Django Static Files Workflow #

Follow these steps to properly integrate your CSS:

1. Set up your project's static directory

   • In your project's root folder (where manage.py lives), create a folder named static, then inside it make a css subfolder.
   • Move your custom CSS file into this static/css directory.

2. Configure your settings.py

   • Make sure these settings are in place (most are default, but double-check):

     # Already included by default
     INSTALLED_APPS = [
         ...
         'django.contrib.staticfiles',
         ...
     ]
     
     STATIC_URL = '/static/'
     
     # Add this line to tell Django where your project-level static files live
     STATICFILES_DIRS = [
         BASE_DIR / "static",
     ]
     
     # For deployment: Set where collectstatic will gather all static files
     STATIC_ROOT = BASE_DIR / 'staticfiles'
     

3. Update your login template to load static files correctly

   • At the very top of your login HTML template, add this line to load Django's static file template tag:

     {% load static %}
     

   • Replace your CSS link with the Django static tag to reference your file properly:

     <link rel="stylesheet" href="{% static 'css/your-custom-style.css' %}">
     

     (Replace your-custom-style.css with the actual name of your CSS file.)

4. Collect static files (for deployment)

   • When you're ready to deploy, run this command to gather all static files (including your custom CSS and Django admin's static files) into the STATIC_ROOT directory:

     python manage.py collectstatic
     

Why This Works #

Django has a dedicated system for managing static files, and following this workflow ensures your styles are loaded reliably, won't get overwritten during updates, and keeps your project structure clean. After setting this up, your login template should render with the correct styling just like your standalone HTML did.

内容的提问来源于stack exchange，提问作者Andres Urrego Angel