CODEWITHSUNDEEP
pythonplotlyplotly-dash
adarvishian
adarvishian

Reputation: 175

Call Local CSS files in Dash App

I am attempting to run the Dash Vanguard demo app while hosting the 4 css files locally. I have successfully been able to use a workaround and locally host a single css file in Dash, but have not been able to simultaneously call all 4.

This is the current Vanguard dash app with the css files externally hosted:

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})

My attempt at hosting css files locally:

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)

The app currently loads without any styling. Not sure why it won't load even one of the css files.

Upvotes: 3

Views: 11160

Answers (2)

Paul D.
Paul D.

Reputation: 610

I had the same issue loading local files. The problem was in the @app.server.route. I changed it to: 

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

and it worked.

Edit: Starting with Dash 0.22 you now just need to put the css file in an assets folder. See the docs

Upvotes: 3

David Skarbrevik
David Skarbrevik

Reputation: 775

I'm currently having the same issue so if you find an answer please add it here!... I don't have a solution but here is the research I've done in case you haven't seen any of these:

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

Upvotes: 0

Related Questions