Question

我试图在基于Flask的网站上设置一些元素的样式，但由于某种原因，我的css文件永远不会被加载。

情况虽然奇特;从layout.html使用路径/static/css/调用时，文件将正常加载，但由于某种原因，页面会在第二次截断/css/的路径并生成404错误。

这是我的Flask项目的结构：

Directory Structure:

+app
+static
    +css
        style-large.css
        style.css
        style-xlarge.css
+templates
    index.html
    layout.html

layout.html的片段：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block doc_title %} {% endblock %}</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/skel.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/skel-layers.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/init.js') }}"></script>


    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/skel.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style-xlarge.css') }}" />
    <!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}" /> -->
    <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>

这就是特殊性;无论我如何将网址更改为文件steyl-large.css，style.css和style-xlarge.css，我总是会收到404错误，如下所示：

127.0.0.1 - - [05/Dec/2015 17:34:20] "GET /static/css/style-xlarge.css HTTP/1.1" 304 -
127.0.0.1 - - [05/Dec/2015 17:34:20] "GET /static/css/style.css HTTP/1.1" 304 -
127.0.0.1 - - [05/Dec/2015 17:34:20] "GET /css/style-large.css HTTP/1.1" 404 -
127.0.0.1 - - [05/Dec/2015 17:34:20] "GET /css/style.css HTTP/1.1" 404 -
127.0.0.1 - - [05/Dec/2015 17:34:20] "GET /css/style-xlarge.css HTTP/1.1" 404 -

前两个请求，导致304代码的请求正常工作，并且几乎呈现在我的页面上的所有内容，但是它们之后就没有了。

我不确定为什么会这样。我认为这可能是导致我页面上的元素没有被设置样式的原因，但我不知道它为什么会发生。

Answer 1

因此，从您的服务器日志中，前两个指向css文件的链接

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

正确地工作，正如他们应该的那样。在第三个链接

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

您的css文件名为style-xlarge.css，但服务器日志中为style-large.css。您没有指向style-large.css的链接。要加载所有四个css文件，您应该使用

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/skel.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style-large.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style-xlarge.css') }}" />

Answer 2

这是我的user.css和user.html：

projet-flask
   |-main.py
   |-.flaskenv
   |-application
       |-__init__.py
       |-frontend
           |-templates
               |-user.html
           |-static
               |-styles
                   |-user.css

在__init_.py中：

app = Flask(__name__,template_folder='./frontend/templates',static_folder='./frontend/static')

在user.html中：

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

404 Flask中的CSS文件出错

2 个答案: