Вызов локальных файлов CSS в приложении Dash - PullRequest
Новая
       8

Вызов локальных файлов CSS в приложении Dash

0 голосов
/ 06 июня 2018

Я пытаюсь запустить демонстрационное приложение Dash Vanguard при локальном размещении 4 файлов css.Я успешно смог использовать обходной путь и локально разместить один файл css в Dash, но не смог одновременно вызвать все 4.

Это текущее приложение-черточка Vanguard с внешними файлами 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.

Ответы [ 2 ]

0 голосов
/ 18 июня 2018

У меня была такая же проблема при загрузке локальных файлов.Проблема была в @ app.server.route.Я изменил его на: 

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

, и это сработало.

Редактировать: Начиная с Dash 0.22, вам просто нужно поместить файл css в папку активов. См. Документы

0 голосов
/ 10 июня 2018

У меня сейчас такая же проблема, поэтому, если вы найдете ответ, пожалуйста, добавьте его сюда! ... У меня нет решения, но вот исследование, которое я провел, если вы не видели ни одного изэто:

https://github.com/plotly/dash/pull/171

https://dash.plot.ly/external-resources

https://github.com/plotly/dash-recipes/blob/master/dash-local-css-link.py

...