How do I use Dash to add local css?

I’m looking to update this behaviour (adding external CSS and JS) in this PR: 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 ( 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 :frowning:


app.head seem not support now,
you can try to use


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

    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.layout = html.Div([
    html.Link(href='/assets/main.css', rel='stylesheet'),

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


app = Dash(__name__.split('.')[0], static_folder='assets')


Thanks! I’ve edited my comment above to remove this confusion :slight_smile:

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!


Here again an example for pip3/Ubuntu users (works even with global installed packages). Search for the dash_core_components folder:


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


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!

This is getting fixed in


We have incorporated everyone’s feedback in our latest release, announced here: Dash version 0.22.0 released!. It is now easy to add local CSS and JavaScript and we have provided an official way to override the Dash Index Template.

For more, read the official docs:

If you have any particular questions about this, please create a new issue. Many thanks to everyone for their feedback on this issue :heart: