Forums

Hello,

As I was searching for a solution for my problem I've seen that it is a common issue but despite the large amount of available pages and forum entries I couldn't figure it out how to import a custom CSS into my webapp.

The Dash app uses the Flask framework on the website and I would like to store all dynamic and static data on PythonAnywhere. The app runs very well but I didn't manage to import the CSS. I looked through the documentations and help pages both on PythonAnywhere and on the Dash help site and tried the following things:

• creating an assets directory with the CSS-file (according to Dash, the app automatically imports the files from there)
• specifying the static URL and it's location on the PythonAnywhere configuration page (I can open the CSS-file from the browser)
• running the app in debugging mode
• adding the CSS file as an external stylesheet
• adding _name_ to the dash code
• trying to add meta-tags in the dash code (with no effect, there are no tags added at all)
• of course a combination of these

Is there anything more I could try?

If I run the app on my laptop on localhost, the style loads without any problem, so I think the problem may be caused somehow by Flask (maybe it is a really trivial thing).

Thanks for the help in advance!

Have a look at our guide for debugging static files: http://help.pythonanywhere.com/pages/DebuggingStaticFiles/

I already went through the guide, but it had no effect unfortunately :(

The file is on the disk and can be reached through the static link, I used absolute paths, checked the case sensitivity, and tried both mapping the folder and the individual file.

Problem solved! It works if I append the CSS via a function and not by manipulating the HTML-Tags manually. The working code looks like this:

app = dash.Dash(__name__)

app.css.append_css({
    "external_url": "https://balcse.pythonanywhere.com/static/00000.css"
})

Source: https://alysivji.github.io/reactive-dashboards-with-dash.html

It does, I just changed the name of the stylesheet

OK -- glad you worked it out!