Question

我查看了一些关于堆栈溢出的相同问题，并尝试了所有最佳答案。他们都没有工作。

我正在使用CSS样式表学习html5。我看了一个关于如何用flask登录表单来构建网页的网站教程。因此，它具有以下base.html文件，该文件具有指向css文件的一些代码链接：

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>RELAX AND WORKOUT</title>
  <link rel="stylesheet" href="bulma.css" />
</head>

最初，http链接后面紧跟着“ href”，它可以正常工作。但是我下载了相同的css文件，并将其放在与base.html文件相同的文件夹中，以便可以使用此css文件。

它们都在./project/templates/the_file

这是下载css文件的链接：https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css

它最初也是本教程的作者写在'href ='之后的。但是，当我将其更改为本地文件名“ bulma.css”时，它根本不会加载样式表。我也尝试了绝对路径和相对路径。他们俩都没有工作。我正在Windows 10上运行它。使用Python 3.7和flask。因此，以我为例，如何使html加载此本地CSS文件？

编辑：

好，我最终使它工作了。

我创建了一个名为“ static”的新文件夹，并将css文件放入其中。然后，我将路径更改为：

<link rel="stylesheet" href="../static/bulma.css" />。

这是否意味着flask将“ templates”文件夹视为仅用于html模板的特殊文件夹，它无法识别其他文件格式？

但是我看到a question，此人将其CSS文件放在同一目录中。答案是只添加一个点就可以了。这就是为什么我将其与所有其他html模板放在我的templates文件夹中的原因。但这对我来说是行不通的。

Answer 1

尝试将您的href="bulma.css"更改为href="./bulma.css"，看看是否可行。

Answer 2

您确定不必进入模板文件夹吗？ “ /templates/bulma.css”

Answer 3

按F12打开开发窗格。转到网络标签。刷新页面。该列表中列出了文件吗？您可能必须刷新缓存才能生效。为此：CTRL + SHIFT + R。如果文件在此处列出，则可以查看预览以确保它是最新的，否则，您仍然需要对缓存进行强制刷新。

对于URL，您还可以使用从根开始以href =“ ../ project / templates / filename.css”开头的绝对文件路径（使用2个句点）。以下是有关此信息的网站：

https://www.w3schools.com/html/html_filepaths.asp

Answer 4

来自flask文档：

Flask自动添加一个静态视图，该视图采用相对于Flaskr / static目录的路径并提供服务。 base.html模板已经具有指向style.css文件的链接：

{{ url_for('static', filename='style.css') }}

您需要在flask应用程序目录中创建一个名为 static 的文件夹，并在其中包含静态文件，例如CSS，图像等。

在您的html代码中使用：

<head>
    <link rel="stylesheet" href= {{ url_for('static', filename='bulma.css') }}>
</head>

html不加载本地css文件

4 个答案: