Flask 应用程序没有从我的项目中加载任何 css 文件答案

【问题标题】：Flask app not loading any css file from my projectFlask 应用程序没有从我的项目中加载任何 css 文件
【发布时间】：2019-12-27 16:23:05
【问题描述】：

我最近开始学习 Flask，一切都很顺利。

所以，我的项目是这样组织的：

FlaskApp 文件夹，其中包含：模板（一个文件夹，其中包含：index.html、layout.html 和样式（文件夹）和 javascript（也文件夹）和 application.py。

我将我的 css 包含在 layout.html（layout.css 和 bootstrap.css）中的标题标签之后，如下所示："

<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">

在底部，在我添加引导程序的 javascript 文件之前：

<script src="javascript/boostrap.js"></script>

在这一切之后，我在引导文档页面的 index.html 中添加了一些 html，例如警报消息...

并且没有应用 CSS。（我提到我已经重新启动了 Flask 应用程序）。

PS：我加了一个：

 body{ background-color: red; }

到 layout.css 还是不行。

非常感谢！

【问题讨论】：

【解决方案1】：

这仅用于开发。

因此，您的应用下需要有两个目录，它们是：static 和 templates。 *.html 文件通常放在templates 下，*.js 和*.css 文件放在static 下。

所以你的应用结构可能是这样的：

app
├── app.py
├── static
│   ├── base.css
│   ├── base.js
│   └── index
│       ├── index.css
│       └── index.js
└── templates
    └── index.html

现在，让我们来看看如何链接这些。

在您的 HTML 文件中，将当前的 <link> 和 <script> 标记替换为如下内容：

对于 CSS：

<link rel="stylesheet" type="text/css" href= {{ url_for("static",filename="index/index.css") }} >

对于 JS：

<script src= {{ url_for("static",filename="index/index.js") }} ></script>

最后，确保你的 python 路由返回适当的html 页面。最简单的就是使用render_template函数。

@app.route("/")
def home():
    return render_template("index.html")

【讨论】：