Django：CSS 不工作

Posted 2023-02-23

技术标签:

【中文标题】Django：CSS 不工作【英文标题】：Django: CSS Is not not working 【发布时间】：2012-11-06 22:24:25 【问题描述】：

我还是 django 的新手，我的 CSS 工作有问题。我遵循了链接中的指示：Django Static Link tutorial，关于处理静态文件。但它仍然无法正常工作。

设置

# Absolute path to the directory static files should be collected to.
# Don't put anything in this directory yourself; store your static files
# in apps' "static/" subdirectories and in STATICFILES_DIRS.
# Example: "/home/media/media.lawrence.com/static/"
STATIC_ROOT = '/Users/a9austin/Development/sites/AlphaSocks/src/static_root/'

# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/'

# Additional locations of static files
STATICFILES_DIRS = (
# Put strings here, like "/home/html/static" or "C:/www/django/static".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
'/Users/a9austin/Development/sites/AlphaSocks/src/staticfiles'

)

查看

#from django.http import HttpResponse
from django.shortcuts import render_to_response


def index(request):
return render_to_response('index.html')

index.html

<link rel="stylesheet" href="STATIC_URLcss/style.css" type="text/css" media="screen" >

和目录组织

src->staticfiles->css->style.css

非常感谢您，非常感谢您的帮助和时间！

【问题讨论】：

“什么”不起作用？如何使用 render() 或 render_to_response() 渲染视图？ settings.py 中是否开启了静态文件上下文处理器？是的，我正在使用 render_to_response，我会用我的视图更新它。它不起作用的 css 实际上并没有改变我的 html。看这个post来处理静态文件 @OtskimanotSqilal 感谢您的回复，我刚刚用我的 STATICFILES_DIR 更新了它，我的 css 仍然没有出现。你配置STATICFILES_DIRS和STATIC_ROOT的方式不对。它们不能包含相同的目录。请参阅我的答案以获取更多信息。 【参考方案1】：

要让 Django 提供静态文件，您必须确保有几个设置。

STATIC_URL

此设置指定静态文件应映射到哪个 url。你已经完成了。

STATICFILES_DIRS

这指定了 Django 应该在其中查找静态文件的系统上的所有文件夹。这个想法是您的项目中可能有几个应用程序，每个应用程序可能需要一组不同的静态文件。因此，出于组织目的，每个应用程序可能包含一个static 目录，它将仅存储它的静态文件。所以 Django 必须有办法知道这些目录在哪里。这就是此设置的用途。

STATIC_ROOT

此设置指定 Django 将所有静态文件复制到哪里，而不是静态文件已经在哪里。这个想法是，一旦你将开发投入生产，Django 就不能再提供静态文件了，因为我不会去这里（它在 article 中）。但是对于生产，所有静态文件都应该在一个目录中，而不是在STATICFILES_DIRS 中指定的许多目录中。所以这个设置指定了一个目录，Django 将通过运行以下命令从STATICFILES_DIRS 内的所有文件中复制所有静态文件到该目录：

$ python manage.py collectstatic

请注意，这仅在您投入生产后才需要，而且此处指定的目录不能与STATICFILES_DIRS 中指定的任何目录相同。

Urls.py

在为 Django 提供静态文件服务的开发过程中，您必须在 urls.py 中包含静态 url：

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

urlpatterns = ...

urlpatterns += staticfiles_urlpatterns()

一旦您完成了上述所有事情，只要您拥有DEBUG = True，就应该提供您的静态文件。在上面的列表中，您似乎只完成了STATIC_URL。另请注意，我上面描述的所有步骤都在您在问题中链接的文档中 (link)。一开始可能会有点混乱，但如果你读了几次，它就会变得更加清晰。

【讨论】：

感谢您的回复。让我确保我理解。所以 STATICFILES_DIR 实际上是静态文件所在的位置。 STATIC_ROOT 是 python 复制/处理它们的地方？是的，但它只会通过运行manage.py 命令来复制它们，并且仅用于生产。在开发中，Django 将查找并提供位于STATICFILES_DIRS 中任何目录中的静态文件。另外我忘了提一下，在视图中确保您使用RequestContext 才能使用 STATIC_URL 。 Kavanaugh Development 的回答表明了这一点。好的，所以当我调用 python manage.py collectstatic 时，它给了我一个错误。 '"您的 STATICFILES_DIRS 设置不是元组或列表；" django.core.exceptions.ImproperlyConfigured：您的 STATICFILES_DIRS 设置不是元组或列表；也许你忘了一个逗号？我将帖子更新为我更改了根目录和目录的内容。请看一下。再次感谢您帮助我对。所以你的STATICFILES_DIRS 就像( 'string_here' ) 这不是一个元组。将其更改为( 'string_here', )，这是一个 Python 元组。但同样，对于开发，您不必收集所有静态文件。 Django 将直接从STATICFILES_DIRS 目录为它们提供服务...【参考方案2】：

将 RequestContext 添加到响应应将 STATIC_URL 变量加载到模板中。

尝试改变：

from django.shortcuts import render_to_response

def index(request):
    return render_to_response('index.html')

到：

from django.shortcuts import render_to_response
from django.template.context import RequestContext

def index(request):
    return render_to_response("index.html", context_instance=RequestContext(request))

有关更多信息，请参阅Referring to static files in templates 上的 Django 文档。

【讨论】：

【参考方案3】：

There is an easy way if you feel that your CSS isn't working.

如果您的项目不是太大，那么您可以制作 CSS 文件与 HTML 位于同一文件中。然后运行它。这样它就会运行例如

<head>
  <meta charset="UTF-8">
  <title>Promantus Bot</title>
      <style type="text/css"> 
* 
    margin: 0;
    padding: 0;


body 
    background-color:#FF625F;


h1, p 
    font-family: sans-serif;
    text-align: center;
    color: #323330;
    font-size:  100px;



p 
    font-size: 30px;


#output, #container 
    display: flex;
    justify-content: center;
    margin-top: 100px;



input 
    background-color: #eee;
    border: none;
    font-family: sans-serif;
    color: #000;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 30px;







</style>


</head>

<body>

  <div id="output"></div>

<div id="container">
    <input type="text" id="input" value="">
</div>





</body>

</html>
`
It's going to run fine this way.

【讨论】：

【参考方案4】：

完成所有操作后，设置DEBUG= True，python collectstatic，清除缓存，如果问题仍然存在则以隐身模式打开将您的.css文件复制到静态文件夹中的另一个新.css文件中，然后运行collectstatic命令。这对我有用。我希望这会对你有所帮助。

【讨论】：

【参考方案5】：

尝试清除缓存。如果您使用的是谷歌浏览器，请转到您的设置>清除浏览数据>选择清除缓存的图像和文件，然后单击清除数据

【讨论】：

【参考方案6】：

如果编码没有问题并且没有显示错误。然后你可以这样做来尝试解决问题。

清除缓存：

如果您使用的是谷歌浏览器，请转到您的设置 --> 清除浏览数据 --> 选择清除缓存的图像和文件，然后单击清除数据

【讨论】：

【参考方案7】：

如果您在开发模式下发生这种情况，请确保您在 settings.py 文件中设置了 DEBUG=True。还要确保 MEDIA_URL 和 MEDIA_ROOT 在您的 settings.py 文件中设置，如下所示：

MEDIA_URL  = '/mymediafolder/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'mymediafolder')

然后在您的主网址文件myapp/urls.py 中，您必须具有以下内容：

from django.conf.urls import url, include
from . import views
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    #Your url patterns here
]

urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

staticfiles_urlpatterns() 用于在开发模式下提供静态文件。

【讨论】：

【参考方案8】：

对我来说它正在改变

<link rel="stylesheet" href=" % static '/css/style.css' % ">

到

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

【讨论】：

【参考方案9】：

有时只需要“Ctrl + F5”

完全刷新页面，就行了。

或 Ctrl + Shift + R