CSS文件未与Django中的项目链接

Question

I want to link css file with my django project. 我想将css文件与django项目链接。 I've tried various methods but its not reflecting any changes in html page. 我尝试了各种方法，但是它没有反映html页面中的任何更改。 I'm new to this, any help will be appreciated. 我对此并不陌生，我们将不胜感激。

This my html code : 这是我的html代码：

{% extends 'base.html' %}
{% load static %}

<link rel="stylesheet" href="{% static 'css/custom.css'%}" 
type="text/css">


{% block content %}


<form class="form-signin">
<div class="text-center mb-4">


    {% csrf_token %}
    <ul>{{shipper_data_object.first_name}}</ul>
    <ul>{{shipper_data_object.last_name}}</ul>



<div class="checkbox mb-3">
    <label>
        <input type="checkbox" value="remember-me"> Remember me
    </label>
</div>

<button class="btn btn-lg btn-primary btn-block" 
type="submit">Sign in</button>
{% endblock %}


<p class="mt-5 mb-3 text-muted text-center">© 2017-2019</p>
</div>
</form>

This is my views.py: 这是我的views.py：

def shipper_login(request):
shipper_data_object = shipper_form(request.POST)
if request.method == "POST" and shipper_data_object.is_valid():

    shipper_data_object.shipper_ID = shipper_data_object.cleaned_data['shipper_ID']
    shipper_data_object.last_name = shipper_data_object.cleaned_data['last_name']
    shipper_data_object.first_name = shipper_data_object.cleaned_data['first_name']
    shipper_data_object.contact = shipper_data_object.cleaned_data['contact']
    shipper_data_object.comapany_name = shipper_data_object.cleaned_data['comapany_name']
    shipper_data_object.gst_pin_or_pan = shipper_data_object.cleaned_data['gst_pin_or_pan']
    shipper_data_object.origin = shipper_data_object.cleaned_data['origin']
    shipper_data_object.destinations = shipper_data_object.cleaned_data['destinations']

    shipper_data_object.save()
shipper_data_object = shipper_form()
# supplier_data_object = auction.suppliers.views.suppliers_form

# if supplier_data_object.operational_cities == shipper_data_object.origin or supplier_data_object.operatioal_cities == shipper_data_object.destinations:
#     return HttpResponse("found match!!")
# else:
#     return HttpResponse("match not found!!")

return render(request, 'shipper_details.html', {'shipper_data_object': shipper_data_object})

This is my base.html: 这是我的base.html：

{% load static %}
<link rel="stylesheet" href="{% static 'css/custom.css'%}" 
type="text/css">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" 

<meta charset="UTF-8">
<title>Title</title>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data- 
toggle="collapse" data-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria- 
expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr- 
only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" 
id="navbarDropdownMenuLink" role="button"
                   data-toggle="dropdown" aria-haspopup="true" 
aria-expanded="false">
                    Dropdown link
                </a>
                <div class="dropdown-menu" aria- 
labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another 
action</a>
                    <a class="dropdown-item" href="#">Something 
else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

</head>


<body>
{% block content %}
{% endblock %}
</body>

In this code I've kept my custom.css file under auction/auction/static/css/custom.css 在这段代码中，我将custom.css文件保存在Auction / auction / static / css / custom.css下

Here is my settings.py file: 这是我的settings.py文件：

STATIC_URL = '/static/'

STATIC_DIRS = 'static'

PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')

add on : I can navigate to custom.css through chrome's inspect element and it is showing that there but changes are still not reflecting in adding any css into it. 添加：我可以通过chrome的inspect元素导航到custom.css，它显示在那里，但更改仍未反映在向其中添加任何CSS的方面。 enter image description here 在此处输入图片说明

Answer 1

try this 尝试这个

in settings.py 在settings.py中

PROJECT_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATIC_ROOT = PROJECT_DIR + '/static/'

in main urls.py 在主要的urls.py中

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

for more details refer this 有关更多详细信息，请参阅此

Answer 2

Try running python manage.py collectstatic 尝试运行python manage.py collectstatic

Django may be looking at your deployed static files. Django可能正在查看您已部署的静态文件。

https://docs.djangoproject.com/en/2.1/howto/static-files/#deployment https://docs.djangoproject.com/en/2.1/howto/static-files/#deployment

Answer 3

as c.grey said on his answer, you should add the STATIC_URL AND STATIC_ROOT to your settings.py file. 正如c.grey在回答中所说的那样，您应该将STATIC_URL和STATIC_ROOT添加到settings.py文件中。

But as your static URL is /static/ with a slash in the opening. 但是，因为您的静态URL是/static/ ，所以在开头加了一个斜杠。 you may also need to change the line in your HTML 您可能还需要更改HTML中的行

From : <link rel="stylesheet" href="{% static 'css/custom.css'%}" 来自： <link rel="stylesheet" href="{% static 'css/custom.css'%}"

To: <link rel="stylesheet" href="/{% static 'css/custom.css'%}" 若要： <link rel="stylesheet" href="/{% static 'css/custom.css'%}"

with adding an opening slash before it. 在其前面添加一个斜杠。

Also, make sure to include the CSS file only in base.html not both base.html and yourfile.html 另外，请确保仅在base.html包括CSS文件，而不能在base.html和yourfile.html都包括CSS文件

Answer 4

Try this in your settings.py file: 在您的settings.py文件中尝试以下操作：

STATIC_URL = '/static/'
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))

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

STATIC_ROOT = STATICFILES_DIRS

In your main urls.py: 在您的主要urls.py中：

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Then run python manage.py collectstatic 然后运行python manage.py collectstatic

And make sure to add css and js file in your base.html . 并确保在base.html添加css和js文件。

CSS文件未与Django中的项目链接

问题描述

4 个解决方案

解决方案1
1 已采纳 2019-03-27 12:01:53

解决方案2
0 2019-03-27 12:10:14

解决方案3
0 2019-03-27 12:10:28

解决方案4
0 2019-03-27 12:22:14

CSS文件未与Django中的项目链接

问题描述

4 个解决方案

解决方案1 1 已采纳 2019-03-27 12:01:53

解决方案2 0 2019-03-27 12:10:14

解决方案3 0 2019-03-27 12:10:28

解决方案4 0 2019-03-27 12:22:14

解决方案1
1 已采纳 2019-03-27 12:01:53

解决方案2
0 2019-03-27 12:10:14

解决方案3
0 2019-03-27 12:10:28

解决方案4
0 2019-03-27 12:22:14