How do I use Dash to add local css?


#13

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

#14

I’m having the same problem here.

Is there any workaround?


#15

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.


Serve_locally option with additional scripts and style sheets
Problem of linking local javascript file
#16

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


Can't seem to change default Height on Graph
#17

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:


#19

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.


#20

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.


#22

Discussed again in Serve_locally option with additional scripts and style sheets


#23

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)


#24

i try all like u say and copy this code. …but still not can loading localhost css


#25

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


#26

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)

#27

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'),
    .....
])

I have an HTML and CSS template, how I can add it to de Dash python script?
#28

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


#29

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!


#30

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.


#31

Randy’s solution worked for me!
Thanks a lot!


#32

This is getting fixed in https://github.com/plotly/dash/pull/286


#33

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: https://dash.plot.ly/external-resources

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


#34