Python Flask Web 应用程序的 CSS 问题

CSS Problems with Flask Web App

提问by Rohit Rayudu

I can't get the CSS to output correctly - my webpages are all unstyled.

我无法让 CSS 正确输出 - 我的网页都没有样式。

This is my link in all my templates. What am I doing wrong?

这是我所有模板中的链接。我究竟做错了什么？

<link type="text/css" rel="stylesheet" href="/stylesheets/style.css"/>

Is there anything special that I have to do with Flask to get it to work?

Flask 有什么特别的地方要让它工作吗？

I've been trying and changing things for about half an hour but can't seem to get it right.

我一直在尝试和改变大约半小时，但似乎无法做到正确。

To sum it up: How do you do CSS with Flask - do I have to have any special python code?

总结一下：你如何用 Flask 做 CSS - 我必须有任何特殊的 python 代码吗？

采纳答案by Nathan

You shouldn't need to do anything special with Flask to get CSS to work. Maybe you're putting style.cssin flask_project/stylesheets/? Unless properly configured, such directories won't be served by your application. Check out the Static Filessection of the Flask Quickstartfor some more information on this. But, in summary, this is what you'd want to do:

你不需要对 Flask 做任何特别的事情来让 CSS 工作。也许你把style.css在flask_project/stylesheets/？除非正确配置，否则您的应用程序将不会提供此类目录。查看Flask 快速入门的静态文件部分以获取更多信息。但是，总而言之，这就是您想要做的：

1. Move static files you need to project_root/static/. Let's assume that you moved stylesheets/style.cssinto project_root/static/stylesheets/style.css.

2. Change

   <link ... href="/stylesheets/style.css" />
   

   to

   <link ... href="{{ url_for('static', filename='stylesheets/style.css') }}" />
   

   This tells the template parser (Jinja2) to tell Flask to find the configured static directory in your project directory (by default, static/) and return the path of the file.

   • If you reallywanted to, you could just set the path as /static/stylesheets/style.css. But you really shouldn't do that - using url_forallows you to switch your static directory and still have things work, among other advantages.

1. 移动您需要的静态文件project_root/static/。让我们假设你搬进stylesheets/style.css了project_root/static/stylesheets/style.css.

2. 改变

   <link ... href="/stylesheets/style.css" />
   

   到

   <link ... href="{{ url_for('static', filename='stylesheets/style.css') }}" />
   

   这告诉模板解析器 (Jinja2) 告诉 Flask 在您的项目目录（默认情况下，static/）中找到配置的静态目录并返回文件的路径。

   • 如果你真的想，你可以将路径设置为/static/stylesheets/style.css. 但是您真的不应该这样做 - 使用url_for允许您切换静态目录并且仍然可以正常工作，以及其他优点。

And, as @RachelSanders said in her answer:

而且，正如@RachelSanders 在她的回答中所说：

In a production setting, you'd ideally serve your static files via apache or nginx, but this is good enough for dev.

在生产环境中，您最好通过 apache 或 nginx 提供静态文件，但这对开发人员来说已经足够了。

回答by Rachel Sanders

You need to create a folder called "static" inside your Flask app, and then put all your CSS files there.

您需要在 Flask 应用程序中创建一个名为“static”的文件夹，然后将所有 CSS 文件放在那里。

http://flask.pocoo.org/docs/quickstart/#static-files

http://flask.pocoo.org/docs/quickstart/#static-files

In a production setting, you'd ideally serve your static files via apache or nginx, but this is good enough for dev.

在生产环境中，您最好通过 apache 或 nginx 提供静态文件，但这对开发人员来说已经足够了。

回答by George Nguyen

The order of handler might cause the problems:

处理程序的顺序可能会导致问题：

• url: /stylesheets static_dir: stylesheets
• url: /.* script: helloworld.application

• url: /stylesheets static_dir: 样式表
• 网址：/.* 脚本：helloworld.application

will work instead of

将工作而不是

• url: /.* script: helloworld.application
• url: /stylesheets static_dir: stylesheets

• 网址：/.* 脚本：helloworld.application
• url: /stylesheets static_dir: 样式表

回答by Lee Ngo

4 steps to do this(building a lot on some of the other answers here, presuming you've got Flask all set up properly):

执行此操作的 4 个步骤（在此处的其他一些答案的基础上进行了大量构建，假设您已正确设置 Flask）：

1) Create a static folder in your appfolder:[root_folder]/app/static/

1）在你的app文件夹中创建一个静态文件夹：[root_folder]/app/static/

2) Move all of your static content (images, JavaScript, CSS, etc.) into those folders. Keep the content in their respective folders (not mandatory, just neater and more organized).

2) 将所有静态内容（图像、JavaScript、CSS 等）移动到这些文件夹中。将内容保存在各自的文件夹中（不是强制性的，只是更整洁、更有条理）。

3) Modify your __init__.pyfile in the appfolder to have this line:

3）修改__init__.py文件app夹中的文件以包含以下行：

app.static_folder = 'static'

This will allow your app to identify your staticfolder and read it accordingly.

这将允许您的应用程序识别您的static文件夹并相应地读取它。

4) In your HTML, set up your file links as such:

4) 在你的 HTML 中，设置你的文件链接：

<link ... href="{{ url_for('static', filename='[css_folder]/[css-file].css') }}" />

For example, if you call your CSS folder 'stylesheets' and file 'styles':

例如，如果您将 CSS 文件夹命名为“stylesheets”，并将文件命名为“styles”：

<link ... href="{{ url_for('static', filename='stylesheets/styles.css') }}" />

That should set everything up properly. Good luck!

那应该正确设置一切。祝你好运！

回答by heimi

In my case - safari on macOS 10.13 - clearing the cache did the trick.

就我而言 - macOS 10.13 上的 safari - 清除缓存可以解决问题。

回答by Tanishka Gupta

try reloading the chrome using

尝试使用重新加载 chrome

ctrl + shift + R

ctrl + shift + R

回答by Yatin

Try to do a hard refresh in the browser. You might be looking at a cached version. Hold down CTRL and press F5 in firefox.

尝试在浏览器中进行硬刷新。您可能正在查看缓存版本。在 Firefox 中按住 CTRL 并按 F5。

回答by Rohan Nagmoti

I had created static folder put my CSS in it and had properly linked it, but it wasn't working. I cleared browser's cache and it worked. Alternatively you can hard refresh the browser by pressing Ctrl+F5on chrome.

我创建了静态文件夹，将我的 CSS 放入其中并正确链接了它，但它不起作用。我清除了浏览器的缓存并且它起作用了。或者，您可以通过在 chrome 上按Ctrl+来硬刷新浏览器F5。

回答by Manuel

"If you change a static file, refresh the browser page. If the change doesn't show up, try clearing your browser's cache." -Flask documentation

“如果更改静态文件，请刷新浏览器页面。如果更改未显示，请尝试清除浏览器缓存。” - 烧瓶文档