django base.html扩展为homepage.html，出现静态图片，但是home.css不起作用

Posted 2023-03-05

技术标签:

【中文标题】django base.html扩展为homepage.html，出现静态图片，但是home.css不起作用【英文标题】：Django base.html extended to homepage.html, static images appear, but home.css does not works 【发布时间】：2020-06-06 19:40:55 【问题描述】：

问题：正如标题所说，我正在构建一个 django 项目，base.html 扩展为 homepage.html 并且工作正常，出现静态图像，但 home.css 在任何地方都不起作用。

更新

我已经切换到base.html 来自这个<link rel="stylesheet" href="% static 'css/home.css' %"> 到这个<link href="css/home.css" rel="stylesheet" /> 我也试过这个：<link rel="stylesheet" type="text/css" href="% static 'css/home.css' %" /> 它会删除 -s 上的格式，该格式是由另一个以前使用的 .css 引起的，该 .css 已被删除，但格式仍然存在。我称这个 css 属性为thickkkcolor: red; base.html 和 home.html 中的许多地方仍然无法正常工作。如果我使用/F12/consol/

127.0.0.1/:1 Refused to apply style from 'http://127.0.0.1:8000/css/home.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

检查站点，也会收到以下错误消息

更新错误消息

Refused to apply style from 'http://127.0.0.1:8000/stacic/css/home.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

属性：Python 3.7、Bootstrap 4

settings.py

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

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

base.html

我创建了一个包含导航栏和页脚的 base.html。这也包含从静态 css 和引导程序中导入的 CSS 它会找到静态文件，因为它会导入出现在此处和主页中的图像

<!doctype html>
<html lang="en">
% load static %

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="xz">
  <meta name="author" content="xz">
  <link rel="shortcut icon" type="image/png" href="% static 'favicon.ico' %"/>
  <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
  <title>Click Helps - BE PART OF THE NEW CREATION</title>
  <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/carousel/">

  <!-- Bootstrap core CSS -->
  <link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <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/home.css' %">


</head>

....

<!-- Bootstrap core javascript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<!-- I have placed in the followring 3 line from bootstrap to make JS work -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

home.html

我使用了我创建的 center CSS 属性

% extends 'applicaonfolderofmine/templates/base.html' %
% load static %

% block content %
<main>
<body>
  <div class="container">
    <h1 id="about" class="center" >About</h1>
...

home.css

可以在“django-project/certainapplication/static/css/home.css”中找到

.center 
  margin: auto;
  width: 60%;
  padding: 10px;

终端中的错误消息

Not Found: /docs/4.3/dist/css/bootstrap.min.css
[22/Feb/2020 15:55:26] "GET /docs/4.3/dist/css/bootstrap.min.css HTTP/1.1" 404 2494
Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[22/Feb/2020 16:24:29] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509
Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[22/Feb/2020 16:24:29] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509

我已阅读以下文章，但他们没有回答我的问题：

css for base template in django Adding css file after all extensions css files Django UserProfile extension Background from CSS not working in Base.html Django mptt, extends "base.html" % extends parent _ template|default:"base.html" % vs % extends "base.html" % in Django? Django templates extending and CSS How does Django's extends work?

【问题讨论】：

如果我正确阅读了您的错误消息，则找不到您的引导 css 和 js，而不是您的 home.css。引导文件似乎不在您的静态文件夹中。好的，那么错误消息与另一个问题不一致，我将获取文件或删除这些行。但是我怎样才能让 home.css 工作呢？我写过它会找到静态文件，所以文件夹，因为它可以使用其中的图像。我还没有写到 home.css 可以在任何地方工作，所以它不能在 base.html 中工作，home.html 不能在任何其他文件中。这不是覆盖问题，因为我有一个普通的thickkk font-weight: bold;，它只应该使文本变为粗体，但它也不起作用。我还在其他几个地方尝试过这些 css 属性，但那里也没有发生任何事情。我的问题不是你的静态文件夹是否被找到，而是你的样式表是否被找到并加载。请检查一下。如果 home.css 在您声称的位置并且您的项目结构正常，它应该可以工作。如果一切设置正确，您可以尝试清空浏览器缓存并重新加载页面。 【参考方案1】：

你有STATICFILES_DIRS 删除STATIC_ROOT 然后输入python manage.py collectstatic，然后是，然后再次运行你的服务器。

【讨论】：

我已经做到了。 + 保存了项目，但没有任何区别。一些区别我没有收到“终端中的错误消息”，但我的 home.css 文件仍然什么都不做。我创建了一个单独的页面，我只使用该样式表，但它仍然没有修改任何内容。 @AragonS 做到了，正如我所说，CSS 文件仍然无法正常工作。我只能让 CSS 工作 A.）如果我直接将其写入该 HTML 文件，B.）引导程序。【参考方案2】：

服务器应该以正确的 MIME 类型响应 JSONP 应用程序/javascript，并且您的请求应该告诉 jQuery 您正在加载 JSONP 数据类型：'jsonp'

请参阅此答案以获取更多详细信息！你也可以看看这个，因为它解释了为什么用 text/plain 加载 .js 文件不起作用。 Disable Chrome strict MIME type checking

【讨论】：

以上是关于django base.html扩展为homepage.html，出现静态图片，但是home.css不起作用的主要内容，如果未能解决你的问题，请参考以下文章

Django：在一个 html 中使用多个 CSS 文件

将 _In_ 扩展为 const

Groovy 将元组/映射扩展为参数

LESS 将伪类扩展为 !important

如何在Python中将列表扩展为函数参数[重复]

转换列表项以扩展为 Google Inbox 等详细信息