Flask 渲染 CSS 文件为空

Question

我在做一个简单的Flask应用时，决定在使用Bootstrap的同时添加自定义的CSS样式。不过，不知道为什么，这个CSS文件显示为空。无论我用 http://localhost:5000/static/style.css 打开它，还是用Firebug检查，结果都是一样的。bootstrap.min.css能正常加载，但style.css却是空的，尽管它实际上并不为空。

模板：

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

CSS文件的路径是 app_root/static/css/style.css 和 app_root/static/css/lib/bootstrap.min.css

但正如我之前提到的，这些文件都是加载的。

有没有人遇到过类似的问题？

编辑：

起初我以为是CSS的问题，所以做了很多修改。这是目前style.css的内容：

.navbar {
    background-color: #aaa;
}

p {
    font: Arial;
}

body {
    height: 100%;
}

我所说的“文件为空”是指一旦加载，它就是空的。我仍然不知道为什么会这样，但经过一段时间的尝试，我发现这和文件名有关系。例如，如果我把style.css重命名为main.css并在HTML中加载它，一切就正常了。

如你所见，这两个文件都被加载了。style.css和bootstrap.min.css

Bootstrap的内容：

style.css的内容：

将style.css重命名为main.css后：

递归目录结构：

project/static/css:
lib/  style.css

project/static/css/lib:
bootstrap-theme.css  bootstrap-theme.min.css  bootstrap.css  bootstrap.min.css

编辑 2：

此外，我在一个单独的测试项目中（在不同的虚拟环境中）也成功重现了这个完全相同的问题，项目中有一个简单的app.py模块，还有static和template文件夹。

编辑 3：测试应用的代码：

from flask import Flask, render_template    

app = Flask(__name__)        

@app.route('/')
def index():
    return render_template('index.html')        

if __name__ == '__main__':
    app.run()

文件夹结构是一样的：

test/

./test:
app.py
static/
templates/

./test/static:
css/

./test/static/css:
lib/
main.css

./test/static/css/lib:
bootstrap.min.css

./test/templates:
index.html

而且应用是用以下命令启动的：

python app.py

Answer 1

这可能不是直接回答你的问题，但或许能帮你解决一些困扰。

使用Bootstrap其实应该很简单，只要你知道怎么做，否则可能会让人感到困惑。

在处理这个问题时，我发现了一个叫做flask-bootstrap的工具，它解决了我一部分的问题。然后我自己写了一个工具（并公开了），这个工具叫做https://pypi.python.org/pypi/machete/，它可以根据模板生成Python代码。

在你的情况下，你可以试着进入一个空文件夹，然后输入：

$ machete -t bootstrap

还有其他工具，比如cookiecutter，但我还没试过。

这样会创建所有必要的文件，让你的代码可以在Pypi上发布（如果你想的话），并且只需输入：

$ python run.py

就能创建出可以运行的文件。你可以查看一下代码，选做这一步是为了理解flask-bootstrap是怎么工作的（这和手动下载bootstrap是不同的，听起来这就是你的情况）。或者你也可以用这个结构来进行编码。

这样一来，你就可以专注于编码，而不是解决安装问题。

Answer 2

更新：我之前说错了，问题不是出在Flask上，而是浏览器。浏览器开了很久，最开始的时候把CSS文件缓存成了空的（因为最开始文件确实是空的）。

看起来解决这个问题最简单的方法就是在开发者工具中关闭浏览器缓存（我用的是Firebug）。另外一个方法是给所有的视图添加HTTP头信息，像这样：

@auth.after_app_request
def after_request(response):
    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    response.headers['Pragma'] = 'no-cache'
    response.headers['Expires'] = '0'
    return response

不过后面这个方法看起来不是个好主意。

附言：请原谅我的菜鸟水平。