I may be missing something obvious but, how do I add the stylesheets to the dash app using this function?
Hey @chriddyp,
This solution was working with a previous version of Dash, however I recently updated to the newest Dash version and this no longer works.
The error is: A local version of /static/TEST.css is not available.
Thanks in advance!
@jyhsu - for security reasons, I removed the implicit serving of the /static resource. You can add it back yourself with something like:
@app.server.route('/static/<path:path>')
def static_file(path):
return app.send_from_directory('static', path)
You can see more solutions here: https://stackoverflow.com/questions/20646822/how-to-serve-static-files-in-flask. The underlying flask server is available as app.server and you can always pass in your own flask instance with the server argument of dash.Dash as in:
server = Flask(__name__)
app = dash.Dash(__name__, server=server)
1 Like
I’m having the same problem here.
Is there any workaround?
One workaround is to set the css through the dash_html_components themselves. Here’s a simple example:
import dash
import dash_html_components as html
import dash_core_components as dcc
from flask import send_from_directory
import os
app = dash.Dash()
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
app.layout = html.Div([
html.Link(
rel='stylesheet',
href='/static/stylesheet.css'
),
html.Div('Assets loading locally')
])
@app.server.route('/static/<path:path>')
def static_file(path):
static_folder = os.path.join(os.getcwd(), 'static')
return send_from_directory(static_folder, path)
if __name__ == '__main__':
app.run_server(debug=True)
Where I’ve saved a file named stylesheet.css within a folder named static.
2 Likes
I could not make it work.
Added a css file on, in my case: C:\Users\Username\AppData\Local\Continuum\Anaconda2\Lib\site-packages\dash_core_components-0.13.0rc1-py2.7.egg\dash_core_components
It seems that Dash doesnt recognize it. Any idea of how to solve this? @chriddyp @mikesmith1611
Thanks a lot
Did you add this in your app.py ?
import dash_core_components as dcc
dcc._css_dist[0]['relative_package_path'].append('mycss.css')
I would probably use this method anyway its much cleaner:
1 Like
If you’re using such method, remember to delete this line:app.css.config.serve_locally = True
It wasn’t working for me, I got confused until I deleted that line.
Thanks for your good suggestion. The only problem is that @app.server.route(’/static/<path:path>’) doesn’t seem to work. Only when I remove the “path:” type converter does it really load local css. So I rather use @app.server.route(’/static/<path>’) instead.
I’m looking to update this behaviour (adding external CSS and JS) in this PR: https://github.com/plotly/dash/pull/171. Feedback welcome! (Please comment on the PR itself)
1 Like
i try all like u say and copy this code. …but still not can loading localhost css
I love Dash but as a data scientist with no CSS experience this whole CSS thing is very frustrating particularly when there are no clear examples of how use local CSS files. In R Shiny stuff just works and don have to worry about style sheets. But I prefer Python and was hoping Dash could be my salvation.
I want to recreate this bootstrap demo (https://getbootstrap.com/docs/4.0/examples/dashboard/) in Dash but cant get past the first hurdle of using the appropriate CSS’s. This or a simple demo showing how to use different CSS locally would be great. I’ve tried the code snippets without any success 
4 Likes
app.head seem not support now,
you can try to use
html.Link(
href='https://XXX.css',
rel='stylesheet'
)
in app.layout
for local css, you need to add a static folder and add the code
import flask
import os
STATIC_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static')
@app.server.route('/static/<resource>')
def serve_static(resource):
return flask.send_from_directory(STATIC_PATH, resource)Here’s a slightly easier way… if you have a CSS file in assets/main.css then you can use the static_folder argument of dash.Dash() to serve up that folder, and then use html.Link to reference it, with an href that starts with / to make it relative to the root of your server:
app = dash.Dash(__name__, static_folder='assets')
app.scripts.config.serve_locally=True
app.css.config.serve_locally=True
app.layout = html.Div([
html.Link(href='/assets/main.css', rel='stylesheet'),
.....
])
5 Likes
Note that when you do it this way the initial name param for the Dash class is mandatory, as it needs to pass it onto Flask, which needs it to work out where whereabouts on the file system assets/ is relative to.
So for a standalone module like an app.py script, you would want this (as in @nicolaskruchten’s example):
app = Dash(__name__, static_folder='assets')
If you’re code is within a package however, then as suggested by the Flask docs, you want to do:
app = Dash('yourpackage', static_folder='assets')
or
app = Dash(__name__.split('.')[0], static_folder='assets')
2 Likes
Thanks! I’ve edited my comment above to remove this confusion 
edit: actually no, your comment is very helpful in context, so I’ve reverted my change to leave it the way it was when you replied!
3 Likes
Here again an example for pip3/Ubuntu users (works even with global installed packages). Search for the dash_core_components folder:
usr/local/lib/python3.5/dist-packages/dash_core_components/
then create your test.css in that directory and insert the following line at the beginning of your code (before the actual app, and leave: ‘relative_package_path’ unchanged , took me a while to figure that one out :))
dcc._css_dist[0][‘relative_package_path’].append(‘test.css’)
next insert these two lines after you created your app (actually the first one should be sufficient):
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
Then it should work.
1 Like
Randy’s solution worked for me!
Thanks a lot!