Modify CSS and Load Locally in Dash App

Dash Python
1

I’m using the css provided in Dash Getting Started here: https://codepen.io/chriddyp/pen/bWLwgP.css

I like it, but want to bring in my own custom font. I’m able to load it using the following:

base_css = 'https://codepen.io/chriddyp/pen/bWLwgP.css'

external_css = [base_css, '/static/local.css']

for css in external_css:
    app.css.append_css({"external_url": css})

@app.server.route('/static/<path>')
def static_file(path):
    static_folder = os.path.join('/var/www/FlaskApp/FlaskApp/', 'static')
    return send_from_directory(static_folder, path)

However, when I save the base_css (again provided by Dash Get Started) as an actual .CSS and load it through my ‘/static/local.css’, it doesn’t work for me. Thoughts on why, is it format?

2

Hey,

The dash app automatically go look for css in the ‘assets’ folder, at the same level as your server. So you could theorically simply have this structure:

app.py
assets
     my_css.css
     my_js.js

check this page for more info: https://dash.plot.ly/external-resources
They also explain in which order the different css are loaded, etc.

2 Likes