python - 在 Dash App 中调用本地 CSS 文件

Question

我正在尝试运行 Dash Vanguard demo app同时在本地托管 4 个 css 文件。我已经成功地使用解决方法并在 Dash 中本地托管单个 css 文件，但无法同时调用所有 4 个文件。

这是当前的 Vanguard dash 应用程序，其 css 文件是外部托管的:

external_css = 
["https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css",    
"https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css",
"//fonts.googleapis.com/css?family=Raleway:400,300,600",
"https://codepen.io/bcd/pen/KQrXdb.css",
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"]

for css in external_css:
   app.css.append_css({"external_url": css})

我尝试在本地托管 css 文件:

app.scripts.config.serve_locally = True
app.css.config.serve_locally = True
....

app.layout = html.Div([
    html.Link(href='/assets/skeleton.min.css', rel='stylesheet'),
    html.Link(href='/assets/skelly.css', rel='stylesheet'),
    html.Link(href='/assets/normalize.min.css', rel='stylesheet'),
    html.Link(href='/assets/font.css', rel='stylesheet'),
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])
....

@app.server.route('/assets/<path:path>')
def static_file(path):
    static_folder = os.path.join(os.getcwd(), 'assets')
    return send_from_directory(static_folder, path)

该应用程序当前加载时没有任何样式。不知道为什么它甚至无法加载其中一个 css 文件。

Answer 1

我在加载本地文件时遇到了同样的问题。问题出在@app.server.route。我把它改为:

@app.server.route('/static/<path>')

并且成功了。

编辑:从 Dash 0.22 开始，您现在只需将 css 文件放入 Assets 文件夹中。 See the docs