在 django allauth 登录页面中加载 css 文件

Question

I can't seem to be able to change the css of my allauth login page.我似乎无法更改我的 allauth 登录页面的 css。 I would like to add some custom css to change a few things.我想添加一些自定义 css 来更改一些内容。

I created a base.css file我创建了一个 base.css 文件

div_id_login.form-group{
    font-weight:200;
}

That is loaded in my login.html file那是在我的 login.html 文件中加载的

{% extends "account/base.html" %}

{% load i18n %}
{% load account socialaccount %}
{%  load crispy_forms_tags %}
{%  load static %}

{% block head_title %}{% trans "Sign In" %}{% endblock %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<head>
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
</head>
{% block content %}

<h1 style = "text-align: center;">{% trans "Sign In" %}</h1>
...

The div class mentioned in the base.css file should be this: base.css文件中提到的div类应该是这样的：

I have made changes to my base.html file according to the answer suggested:我根据建议的答案对我的 base.html 文件进行了更改：

{%  load static %}
<!DOCTYPE html>
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <head>
    <title>{% block head_title %}{% endblock %}</title>
    {% block extra_head %}
    {% endblock %}
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="{% static 'css/base.css' %}">
  </head>

However, still the css changes I made are still not appearing in login.html但是，我所做的 css 更改仍然没有出现在 login.html 中

Answer 1

Your login.html file extends account/base.html so you need to include this:您的 login.html 文件扩展了 account/base.html，因此您需要包含以下内容：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<head>
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
</head>

inside a block that is defined in account/base.html.在 account/base.html 中定义的块内。 Often there is an extra_head block or similar that you can use for the job.通常有一个extra_head块或类似的块可以用于这项工作。

Answer 2

Maybe it's because Django can't find your base.css.可能是因为 Django 找不到你的 base.css。 Do you get a 404 error when you access the CSS upon visiting the webpage?访问网页时访问 CSS 时是否出现 404 错误？ The error would appear like this in the console while running the server:运行服务器时，控制台中会出现这样的错误：

GET /static/account/style.css HTTP/1.1" 404 1677

In my case, my CSS file is located in <project directory>/static/account/style.css就我而言，我的 CSS 文件位于<project directory>/static/account/style.css

Django can't seem to find my style.css so I added this in the project's settings.py : Django 似乎找不到我的style.css所以我在项目的settings.py添加了这个：

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

And the CSS file is working now. CSS 文件现在正在运行。 Django's static file searching is kind of tricky. Django 的静态文件搜索有点棘手。

在 django allauth 登录页面中加载 css 文件

问题描述

2 个解决方案

解决方案1
1 2019-12-18 16:08:38

解决方案2
0 2020-05-28 15:18:15

在 django allauth 登录页面中加载 css 文件

问题描述

2 个解决方案

解决方案1 1 2019-12-18 16:08:38

解决方案2 0 2020-05-28 15:18:15

解决方案1
1 2019-12-18 16:08:38

解决方案2
0 2020-05-28 15:18:15