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

Dash Python
1

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!

1 Like
2

Hi,

Have you figured it out yet? I thought that the assets folder could have nested subfolders with stylesheets, but maybe I am wrong…

One alternative to keep both css and python modules for components in the same location could be to change assets folder in Dash to “.” and let it scan your entire project dir (you can exclude some regex patterns as well). More info here

3

THANK YOU SO MUCH! I have searched for this solution for so long!

4

@Matan @jlfsjunior Hey there, I’m struggling with this too. Curious, what was the actual solution here?

e.g., I read the article linked above, and the following’s still a bit unclear…

1. Is it possible to have nested assets subfolders containing custom stylesheets (i.e., custom CSS files)?

Note 1 – the simple example below has a nested subfolder called “typography” with a custom stylesheet called “typography.css”. when this code runs, the custom typography stylesheet doesn’t render. However, when we pull the file out of the folder and have it inside the assets folder, it works.

Note 2 – oddly enough, it seems as though vector files will still render even when those files live in a nested subfolder of assets. In the same example below, the “image.svg” file does render. No idea why.

image

2. Is it possible to have multiple assets folders? Is it possible to point the app to the specific assets folder you’d like to render for a given repo or set of repos, for example? Or is there another way to handle this?

Thanks!!

5

@adamschroeder not sure if you could shed some light here?

6

Can anyone help answer this?

7

@AnnMarieW Thought you might be able to help! Any thoughts on this?

8

For each app, you can specify a path to the assets folder - see more info in the API reference page below.

But I’m not sure how to point an app to an assets folder with multiple folders with css files. (Doesn’t mean you can’t do it - I just don’t know how :slight_smile: