我尝试整合 this (有一个 layout.html 和 index.html)到我的应用程序中。在开始之前,我只有 index.html,顶部包含我所有的 css/javascript。
当前文件结构
/app
- app_runner.py
/templates
- layout.html
- index.html
/static
/styles
- mystyle.css
Layout.html(主要是 css 和 javascript CDN 以及我的样式表)
<!doctype html>
<!-- Latest bootstrap compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jquery -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<!-- Latest bootstrap compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jstree -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<!-- my stylesheet -->
<link rel='stylesheet' type='text/css' href="{{url_for('static',filename='styles/mystyle.css')}}" />
<script type="text/javascript">
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
{% block body %}{% endblock %}
该页面的大部分内容呈现相同:jstree 出现,bootstrap 工作,我的样式的其余部分被应用。在我的 css 文件中,有一行未应用:
td {
padding: 5px;
}
开发人员控制台显示 padding:0,它来自引导脚本。如果我在开发人员控制台中更改它,我可以将其更改为 5px。
我听说使用 !important
是不好的做法,但我还是试过了,没有任何改变。我尝试向我所有的 td
添加一个类,这样它就会有更高的先例(基于 this answer )并具有那种风格(.my_row{padding:5px;}
) 适用,但同样不会改变。所以我的 css 似乎没有应用于我的表。 mystyle.css 的其他部分仍然有效。
关于为什么填充没有应用到我的表格有什么想法吗?
最佳答案
原来我的样式表没有在缓存中刷新。我在这个 site 上找到了答案.
我将这些代码行添加到我的 python (app-runner.py)
@app.context_processor
def override_url_for():
return dict(url_for=dated_url_for)
def dated_url_for(endpoint, **values):
if endpoint == 'static':
filename = values.get('filename', None)
if filename:
file_path = os.path.join(app.root_path,
endpoint, filename)
values['q'] = int(os.stat(file_path).st_mtime)
return url_for(endpoint, **values)
关于python - 布局中的 Flask css 未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41904440/