Is there a way how I can specify which .css file stored in the assets folder my app should use?

Viewed 229

For a project I'm trying to create a web application dashboard with Dash.

Because I have multiple versions of the web app with different layouts, I want each version of my app to point towards a specific .css file, stored in my assets folder, to use.

I don't want to delete the other .css file which I use for a different version but resides in the same project folder. The other .css file should be basically ignored.

project
│   app.py
│   app_custom.py    
│
└───/assets
    │   style.css
    │   custom_style.css

So if I run app_custom.py, I want the app to only use the style_custom.css.

Below my code:

# external css/js files are loaded before .css files in /assets
external_stylesheets = [dbc.themes.BOOTSTRAP,
    {
        "href": "https://fonts.googleapis.com/css2?"
        "family=Lato:wfght@400;700&display=swap",
        "rel": "stylesheet",
    }
]

app = Dash(__name__, external_stylesheets=external_stylesheets)

app.index_string = '''
<!DOCTYPE html>
<html>
    <head>
        {%metas%}
        <title>{%title%}</title>
        {%favicon%}
        {%css%}
    </head>
    <body>
        <div>My Custom header</div>
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
            {%renderer%}
        </footer>
        <div>My Custom footer</div>
    </body>
</html>
'''

app.layout = html.Div(
    dbc.Button("Success", color="success", className="mr-1")
)

if __name__ == "__main__":
    app.run_server()
1 Answers

You can ignore certain files within the assets folder using:

app = dash.Dash(assets_ignore='fileToIgnore')

The docs explaining this: https://dash.plotly.com/external-resources

I would compile a list of all the files in your assets folder, then remove the one file want to use from the list before passing the list to the assets_ignore parameter.

Related