Question

我正在渲染一个模板，我试图用外部样式表设置样式。文件结构如下。

/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是我正在渲染的模板这一事实有关？ python看起来像这样。

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

我知道这很有用，因为我仍然可以渲染模板。但是，当我试图将样式代码从html的“head”标签中的“样式”块移动到外部文件时，所有样式都消失了，留下了一个简单的html页面。有人看到我的文件结构有任何错误吗？

Answer 1

除非您在Flask初始化期间专门覆盖它，否则您需要设置'静态'文件夹（对于css / js文件）。我假设你没有覆盖它。

css的目录结构应该是：

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

请注意，您的/ styles目录应位于/ static

下

然后，这样做

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

Flask现在将在static / styles / mainpage.css

下查找css文件

Answer 2

在jinja2模板（烧瓶使用）中，使用

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

static文件通常位于static文件夹中，除非另有配置。

Answer 3

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

在 Google Chrome浏览器中，按下重新加载按钮（F5）不会重新加载静态文件。如果您遵循可接受的解决方案，但仍看不到对CSS所做的更改，请按ctrl + shift + R忽略缓存的文件并重新加载静态文件。

在 Firefox 中，按下重新加载按钮将重新加载静态文件。

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

Answer 4

<块引用>

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

如果您像上面那样链接了 css 并且它不起作用，那么您可以执行以下操作：-

chrome => ctrl + shift + R
edge => ctrl + shift + R
firefox => ctrl + shift + R

Answer 5

如果以上任何方法都不起作用，并且您的代码是完美的，则请按Ctrl + F5尝试进行强制刷新。它将清除所有机会，然后重新加载文件。它对我有用。

Answer 6

我现在正在运行flask的1.0.2版本。上面的文件结构对我不起作用，但是我找到了一个文件结构，如下所示：

app_folder / flask_app.py 静态的/ style.css 模板/ index.html

（请注意，“静态”和“模板”是文件夹，应命名为完全相同的名称。）

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

>> import flask
>> flask.__version__

Answer 7

我已经阅读了多个主题，但没有一个主题可以解决人们正在描述的问题，我也经历过。

我什至尝试离开conda并使用pip升级到python 3.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（ name ）），然后搜索teamplate_folder和static_folder

为了解决此问题，在创建应用程序时必须指定如下值：

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下的文件夹中。

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

实际上，当我弄乱文件夹时，我已经开始遇到问题，有时却无法正常工作。一劳永逸地解决了这个问题

html代码如下：

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

This the code

Here the structure of the folders

Answer 8

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

static/styles/style.css

Answer 9

要添加到该线程的另一点。

如果在.css文件名中添加下划线，则将无法正常工作。

Answer 10

还有一点要添加。除了上面提到的答案外，请确保将以下行添加到app.py文件中：

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

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

Answer 11

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

Answer 12

我很确定它与Laravel模板类似，这就是我的做法。

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

简称： CSS file pathing problem

Simple flask application that reads its content from a .html file. External style sheet being blocked?

应用程序没有拿起.css文件（flask / python）

12 个答案: