应用程序未拾取.css文件（烧瓶/ python）

113

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

/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页面。有人看到我的文件结构有任何错误吗？

— 扎克
source

225

您需要有一个“静态”文件夹设置（用于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文件

— Codegeek
source

4

这应该标记为答案。此解决方案对我有用，如果不适合您，请告诉我们帮助。否则标记它。@zack

— Shahryar Saljoughi

2

为什么没有将此标记为正确答案？它应该是。

— pfabri '19

1

抱歉，忘了回到此列表：)静态文件夹绝对是必经之路

— Zack

1

对于Javascript，请将脚本文件添加到静态文件夹。 <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>

— 中，HAr

17

在jinja2模板（flask使用的模板）中，使用

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

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

— njzk2
source

1

不幸的是，这给了我一个错误。BuildError ：（'mainpage.css'，{}，无）

— Zack

6

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

我什至尝试离开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" >

这个代码

这里的文件夹结构

— 斯特凡诺·图维里（Stefano Tuveri）
source

2

仍然有下面由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应该忽略缓存的文件并重新加载静态文件。但是，这在我的计算机上不起作用。

— 克里斯蒂安·约翰森
source

非常感谢，它解决了我在Google Chrome浏览器中遇到的问题（Ctrl + Shift + R）。有什么方法可以自动忽略缓存的文件吗？

— Alexis

1

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

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

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

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

进口烧瓶

烧瓶-版本

— 莱巴赫
source

抱歉，请您确切描述一下您的所作所为？我在同一个问题上挣扎！

— user3002996 '18

0

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

static/styles/style.css

— 戈皮
source

0

还有一点要添加到该线程上。

如果在.css文件名中添加下划线，则将无法使用。

— 郑SW
source

0

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

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

否则，flask将无法检测到静态文件夹。

— 桑杰·南达库玛（Sanjay Nandakumar）
source

0

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

— Hackytech
source

-8

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

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

引用： CSS文件路径问题

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

— 核心
source

2

为了您的兴高采烈，Laravel是PHP的，而Flask是Python的。它们不能以类似方式工作。它们具有非常不同的目录结构和行为。

— 孔

要导入静态文件，我们需要将这些静态文件放入静态文件夹中。您提供的文件夹结构可以使用普通的HTML文件。但不适用于Flask

— Gopi P