内容 隐藏
问题：应用程序未拾取.css文件（烧瓶/ python）
回答 0
回答 1
回答 2
回答 3
回答 4
回答 5
回答 6
回答 7
回答 8
回答 9

问题：应用程序未拾取.css文件（烧瓶/ 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是我正在渲染的模板有关吗？python看起来像这样。

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

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

点击查看英文原文

I am rendering a template, that I am attempting to style with an external style sheet. File structure is as follows.

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

mainpage.html looks like this

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

None of my styles are being applied though. Does it have something to do with the fact that the html is a template I am rendering? The python looks like this.

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

I know this much is working, because I am still able to render the template. However, when I tried to move my styling code from a “style” block within the html’s “head” tag to an external file, all the styling went away, leaving a bare html page. Anyone see any errors with my file structure?

回答 0

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

点击查看英文原文

You need to have a ‘static’ folder setup (for css/js files) unless you specifically override it during Flask initialization. I am assuming you did not override it.

Your directory structure for css should be like:

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

Notice that your /styles directory should be under /static

Then, do this

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

Flask will now look for the css file under static/styles/mainpage.css

回答 1

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

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

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

点击查看英文原文

In jinja2 templates (which flask uses), use

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

The static files are usually in the static folder, though, unless configured otherwise.

回答 2

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

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

这个代码

这里的文件夹结构

点击查看英文原文

I have read multiple threads and none of them fixed the issue that people are describing and I have experienced too.

I have even tried to move away from conda and use pip, to upgrade to python 3.7, i have tried all coding proposed and none of them fixed.

And here is why (the problem):

by default python/flask search the static and the template in a folder structure like: 

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

you can verify by yourself using the debugger on Pycharm (or anything else) and check the values on the app (app = Flask(name)) and search for teamplate_folder and static_folder

in order to fix this, you have to specify the values when creating the app something like this: 

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)

the path TEMPLATE_DIR and STATIC_DIR depend on where the file app is located. in my case, see the picture, it was located within a folder under src.

you can change the template and static folders as you wish and register on the app = Flask…

In truth, I have started experiencing the problem when messing around with folder and at times worked at times not. this fixes the problem once and for all

the html code looks like this: 

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

This the code

Here the structure of the folders

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

点击查看英文原文

Still having problems after following the solution provided by codegeek:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}"> ?

In Google Chrome pressing the reload button (F5) will not reload the static files. If you have followed the accepted solution but still don’t see the changes you have made to CSS, then press ctrl + shift + R to ignore cached files and reload the static files.

In Firefox pressing the reload button appears to reload the static files.

In Edge pressing the refresh button does not reload the static file. Pressing ctrl + shift + R is supposed to ignore cached files and reload the static files. However this does not work on my computer.

回答 4

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

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

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

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

进口烧瓶

烧瓶-版本

点击查看英文原文

I’m running version 1.0.2 of flask right now. The above file structures did not work for me, but I found one that did, which are as follows:

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

(Please note that ‘static’ and ‘templates’ are folders, which should be named exactly the same thing.)

To check what version of flask you are running, you should open Python in terminal and type the following accordingly:

import flask

flask –version

回答 5

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

static/styles/style.css
点击查看英文原文

The flask project structure is different. As you mentioned in question the project structure is the same but the only problem is wit the styles folder. Styles folder must come within the static folder.

static/styles/style.css

回答 6

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

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

点击查看英文原文

One more point to add on to this thread.

If you add an underscore in your .css file name, then it wouldn’t work.

回答 7

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

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

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

点击查看英文原文

One more point to add.Along with above upvoted answers, please make sure the below line is added to app.py file:

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

Otherwise flask will not be able to detect static folder.

回答 8

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

点击查看英文原文

If any of the above method is not working and you code is perfect then try hard refreshing by pressing Ctrl + F5. It will clear all the chaces and then reload file. It worked for me.

回答 9

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

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

引用： CSS文件路径问题

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

点击查看英文原文

I’m pretty sure it’s similar to Laravel template, this is how I did mine.

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

Referred: CSS file pathing problem

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。