应用未加载 .css 文件（flask/python）

184 投票

13 回答

261171 浏览

提问于 2025-04-17 21:21

我正在渲染一个模板，并试图用外部样式表来给它加样式。我的文件结构如下。

/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”标签里的“style”块移动到一个外部文件时，所有的样式都消失了，只剩下一个空白的html页面。有人能帮我看看我的文件结构有没有错误吗？

文件结构模板渲染 css HTML flask 外部样式表样式应用

13 个回答

在你的代码中添加以下内容：

 <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

回答于 2025-04-17 由 Python大师

分享举报

我看了很多讨论，但没有一个能解决大家提到的问题，我自己也遇到了同样的情况。

我甚至尝试过不使用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）），查找template_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的路径取决于app文件的位置。在我的例子中，见图片，它位于src文件夹下。

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

实际上，我开始遇到这个问题是因为在文件夹中乱动，有时能工作，有时又不行。这样做可以彻底解决这个问题。

HTML代码看起来是这样的：

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

这是代码

这是文件夹结构

回答于 2025-04-17 由 Python大师

分享举报

如果你按照codegeek提供的解决方案操作后，还是遇到问题，比如这段代码：
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">，那就继续往下看。

在谷歌浏览器中，按下重载按钮（F5）并不会重新加载静态文件。如果你已经按照推荐的解决方案操作，但还是看不到你对CSS做的修改，那就试试按下 ctrl + shift + R，这样可以忽略缓存的文件，重新加载静态文件。

在火狐浏览器中，按下重载按钮似乎会重新加载静态文件。

在Edge浏览器中，按下刷新按钮并不会重新加载静态文件。按下 ctrl + shift + R 本来是用来忽略缓存文件并重新加载静态文件的，但在我的电脑上这个方法并不奏效。

回答于 2025-04-17 由 Python大师

分享举报

在jinja2模板中（Flask使用的模板），你可以使用

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

通常情况下，static文件会放在static文件夹里，除非你做了其他的设置。

回答于 2025-04-17 由 Python大师

分享举报

401

你需要设置一个叫做 'static' 的文件夹，用来放置 css 和 js 文件，除非你在初始化 Flask 时特别指定了其他地方。我假设你没有做这样的指定。

你的 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 文件。

回答于 2025-04-17 由 Python大师

分享举报

应用未加载 .css 文件（flask/python）

13 个回答

在你的代码中添加以下内容：

撰写回答