Adding local css in Dash - with Windows

Dash Python
1

Hello everybody,

I would like to use a local css in my dash app. I followed the steps explained in the dash documentation, section "Adding Your Own CSS and JavaScript to Dash Apps".

When I try it out in my Linux environment with Firefox, it works perfectly fine as expected.
Then I tried it under Windows, the result was ugly (I made the try with IE, Firefox, and Chrome).

A glance at the html source code shows that in the case of Windows, there was no link in the header pointing to the css file, while I got it in my Linux browser:

–
Windows :

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Dash</title>                
        </head>

Linux :

    <!DOCTYPE html>
    <html>
         <head>
             <meta equiv="X-UA-Compatible" content="IE=edge">
             <meta charset="UTF-8"/>
             <title>Dash</title>        
             <link rel="stylesheet" href="/assets/header.css">
             <link rel="stylesheet" href="/assets/typography.css">
         </head>

Does anyone have a hint on what I may be doing wrong, or if this is something that needs to be corrected in a next Dash release ?

Thank you for your help. The answer “don’t use Windows” is not what I expect :blush:

2

I think you need to have the CSS files lying in the dash-core-components package folder.

Windows user here. Local CSS works fine for me, I do like this:

dcc._css_dist[0]['relative_package_path'].append('css/font-awesome_min.css')
dcc._css_dist[0]['relative_package_path'].append('css/google_dosis_font.css')
dcc._css_dist[0]['relative_package_path'].append('css/google_raleway_font.css')

And have the CSS files in a folder named ‘css’ the following path:
“C:\Users\username\AppData\Local\Continuum\Lib\site-packages\dash_core_components”
Which is my path to my dcc package.

3

Please do not do this. This is not a stable API, it will break in the future!

The official instructions in Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly are the recommended way to do this. It should work on Windows, in fact the feature was developed on a windows machine.

From the looks of it, it looks like you’re windows version of dash might be old? <meta equiv="X-UA-Compatible" content="IE=edge"> was added in Add meta http-equiv for ie compatibility to the index by default. by T4rk1n · Pull Request #316 · plotly/dash · GitHub and definitely isn’t OS dependent.
Upgrade with:

pip install dash --upgrade
4

Thank you both for your help. Chris got it right, even though I installed dash not so long ago, upgrading my windows version fixed the issue. It’s a relief to see that the easy way described in the documentation works everywhere and that there is no need for fancy tricks :slight_smile:

Cheers,

2 Likes
5

Guess I need to take the upgrade step, fingers crossed, as well. :grimacing: