应用程序不接收. css 文件(flask/python)

我正在呈现一个模板，我试图使用外部样式表对其进行样式设置。文件结构如下。

/app
- app_runner.py
/services
- app.py
/templates
- mainpage.html
/styles
- mainpage.css

Mainpage.html 如下所示

<html>
<head>
<link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
</head>
<body>
<!-- content -->

但是我的风格都没有被应用。它是否与 HTML 是我正在呈现的模板这一事实有关？蟒蛇看起来像这样。

return render_template("mainpage.html", variables..)

我知道这很有效，因为我仍然能够渲染模板。但是，当我试图将样式代码从 html 的“ head”标记中的“ style”块移动到外部文件时，所有的样式都消失了，只留下一个 html 页面。有人看到我的文件结构有什么错误吗？

219755 次浏览
小开

我很确定这和 Laravel 的模板很相似，这就是我做我的模板的方法。

<link rel="stylesheet" href="/folder/stylesheets/stylesheet.css" />

参考: CSS 文件路径问题

简单的烧瓶应用程序，从一个. html 文件读取其内容。外部样式表被阻塞？

小开

在 jinja2模板(烧瓶使用的模板)中，使用

href="\{\{ url_for('static', filename='mainpage.css')}}"

但是，除非另外配置，否则 static文件通常位于 static文件夹中。

小开
最佳答案

您需要有一个“静态”文件夹设置(用于 css/js 文件) ，除非您在 Flask 初始化期间特别覆盖它。我猜你没有覆盖它。

你的 css 目录结构应该是这样的:

/app
- app_runner.py
/services
- app.py
/templates
- mainpage.html
/static
/styles
- mainpage.css

注意，您的/style 目录应该位于/static 目录下

那就这么做

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

Flask 现在将在 static/style/mainpage.css 下查找 css 文件

小开

我现在正在运行1.0版本的烧瓶。 上面的文件结构对我来说不起作用，但是我找到了一个起作用的文件结构，如下所示:

     app_folder/ flask_app.py/ static/ style.css/ templates/
index.html

(请注意，‘ static’和‘ template’是文件夹，它们的名称应该完全相同。)

要检查您正在运行的烧瓶的版本，您应该在终端中打开 Python，并相应地键入以下内容:

进口烧瓶

酒瓶，版本

小开

我读过多篇文章，但没有一篇能解决人们所描述的问题，我也有过类似的经历。

我甚至尝试从 conda 和使用 pip，升级到 python3.7，我已经尝试了所有的编码建议，没有一个是固定的。

这就是为什么(问题) :

默认情况下，python/flask 搜索文件夹结构中的静态和模板，如:

/Users/username/folder_one/folder_two/ProjectName/src/app_name/<static>
and
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<template>

您可以自己使用 Pycharm 上的调试器(或其他任何东西)进行验证，并检查应用程序上的值(app = Flask (姓名)) ，然后搜索 team plate _ file 和 static _ file

为了解决这个问题，你必须在创建应用程序的时候指定下面这些值:

TEMPLATE_DIR = os.path.abspath('../templates')
STATIC_DIR = os.path.abspath('../static')


# app = Flask(__name__) # to make the app run without any
app = Flask(__name__, template_folder=TEMPLATE_DIR, static_folder=STATIC_DIR)

路径 TEMPLATE _ DIR 和 STATIC _ DIR 取决于文件应用程序的位置。在我的例子中，请看图片，它位于 src 下的一个文件夹中。

您可以根据需要更改模板和静态文件夹，并在 app = Flask 上注册..。

事实上，我已经开始经历这个问题时，乱搞文件夹，有时工作，有时没有。这将一劳永逸地解决问题

Html 代码如下:

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

这是密码

这里是文件夹的结构

小开

烧瓶项目结构不同。正如您在问题中提到的，项目结构是相同的，但唯一的问题是样式文件夹。样式文件夹必须位于静态文件夹中。

static/styles/style.css
小开

在遵循 codeeek 提供的解决方案后仍然有问题: < br/> <link rel= "stylesheet" type= "text/css" href= "\{\{ url_for('static',filename='styles/mainpage.css') }}">？

在 谷歌浏览器中按下重新加载按钮(F5)将不会重新加载静态文件。如果您已经按照接受的解决方案，但仍然看不到您对 CSS 所做的更改，那么按 ctrl + shift + R忽略缓存的文件并重新加载静态文件。

在 火狐中按下重新加载按钮就会出现重新加载静态文件。

在 Edge中，按刷新按钮不会重新加载静态文件。按 ctrl + shift + R应该忽略缓存的文件并重新加载静态文件。但是，这在我的计算机上不起作用。

小开

还有一点要补充。

如果在.css 文件名中添加下划线，那么它就不会工作。

小开

还有一点要补充。除了上面的答案，请确保下面一行添加到 app.py文件中:

app = Flask(__name__, static_folder="your path to static")

否则烧瓶将无法检测到静态文件夹。

小开

如果上面的任何一个方法不起作用，你的代码是完美的，那么尝试通过按下(Ctrl + F5)来刷新窗口和 Mac (按住 Cmd 和 Shift，然后按下 R [ Command + Shift + R ])。它将清除所有缓存，然后重新加载文件。这招对我很管用。

小开 
<link rel= "stylesheet" type= "text/css" href= "\{\{ url_for('static',filename='name of css file') }}">

如果你已经像上面那样链接了你的 css，但是它没有工作，那么你可以做以下事情:-

  1. Chrome = > ctrl + shift + R
  2. 边缘 = > ctrl + shift + R
  3. Firefox = > ctrl + shift + R
小开

奇怪的是，对于我来说，有一个“静态”文件夹，同时命名我的。Css 文件作为“ main.css”工作。如果我有任何其他的文件名-例如“ styles.css”或“ mainstyle.css”，样式在呈现时不会反映在页面上。

小开

如果你想在 Flask 中使用 Blueprint 连接 html 和 css:

  1. 确保设置了模板和静态文件夹: Core = Blueprint (‘ core’，姓名，template _ file = ‘ template’，static _ file = ‘ static’)

  2. 在 href 代码中添加 url _ for:


提交答案