Python Plotly Dash Is there a way to use Css files outside the assets folder? / Have multiple assets folders

Question

Hi guys so I have been working on quite a big project and it's really messy to put all the CSS files inside one folder when my project is divided into a lot of folders for example:

-- assets # folder
-- components # folder
  -- Header # folder
    -- Buttons.py
    -- Title.py
    -- DateDropdown.py
  -- Body # folder
    -- Pages # folder
       -- page1.py
       -- page2.py
  -- SideNavBar # folder
  -- Footer # folder
-- app.py

And it goes on and on to different components, now I am searching for a solution like The way we work with CSS in react, put the CSS of the files that use it in the same folder import the CSS, and use it. or open an assets folder for each big component like header, footer, side navbar, and so on...

Thanks for taking your time reading! if you have an idea please do share it!

Example: (Update) I have a folder tree that goes like this:

-- mainDash.py # the app is initiated here
-- app.py # The app layout is initiated here
-- components # Folder
    -- header.css
    -- Header.py # The header HTML

The code of the header python:

import dash_html_components as html

header = html.Div(
    id='Header', 
    children=[
        html.Link(
            rel='stylesheet',
            href='/components/header.css'
        ),
        html.Div("Medical Cost Personal")
    ]
)

The code of the header CSS:

#header {
    flex: 1;
    color: #fff;
    font-size: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

The code of the app initiation:

import dash
external_stylesheets = ['/components/header.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

Tried the external_stylesheets way and the HTML link way both didn't work any idea why?

Answer 1

The first thing is to include the stylesheets, there are two possibilities (one does not exclude the other):

Include css files as external_stylesheets , so that they are loaded within the <head> tag along with other stylesheets, eg. :

 CSS = [ 'https://cdn.example.min.css', # an external file '/res/components/Header/assets/buttons.css', '/res/components/Header/assets/title.css', #... other component styles... ] app = dash.Dash(__name__, external_stylesheets=CSS)

Include css files in the layout as Link components where you need them, eg. :

 html.Div(id='Header', children=[ html.Link( rel='stylesheet', href='/res/components/Header/assets/title.css' ), html.Div('The Header') ])

Once you have included the stylesheets, the second thing is to serve these files as static resources, which means doing some routing (otherwise Dash/Flask will serve html):

from flask import send_from_directory

app = dash.Dash(__name__, external_stylesheets=CSS)
server = app.server

# ...

@server.route('/res/<path:filepath>')
def serve_res(filepath):
    return flask.send_from_directory('./', filepath)

You noticed I prepended urls with res , this is just to ease the route matching and is a bit more secure, you could use static or whatever (just don't use assets , it's reserved by Dash), or just filter for filepath ending with .css .

Python Plotly Dash Is there a way to use Css files outside the assets folder? / Have multiple assets folders

Question

1 answers

solution1
0 2021-11-20 15:55:04

Python Plotly Dash Is there a way to use Css files outside the assets folder? / Have multiple assets folders

Question

1 answers

solution1 0 2021-11-20 15:55:04

solution1
0 2021-11-20 15:55:04