¿Hay alguna manera de utilizar archivos Css fuera de la carpeta de assets en Python Plotly Dash? / ¿Se pueden tener varias carpetas de assets?
Hola chicos, he estado trabajando en un proyecto bastante grande y es realmente desordenado colocar todos los archivos CSS en una sola carpeta cuando mi proyecto está dividido en muchas carpetas, por ejemplo:
-- assets (carpeta)
-- components (carpeta)
-- Header (carpeta)
-- Buttons.py
-- Title.py
-- DateDropdown.py
-- Body (carpeta)
-- Pages (carpeta)
-- page1.py
-- page2.py
-- SideNavBar (carpeta)
-- Footer (carpeta)
-- app.py
Y así sucesivamente con diferentes componentes. Ahora estoy buscando una solución como la forma en que trabajamos con CSS en React, poner el CSS de los archivos que lo usan en la misma carpeta, importar el CSS y usarlo, o abrir una carpeta de activos para cada gran componente como el encabezado, el pie de página, la barra lateral, etc.
¡Gracias por tomarte el tiempo de leer! Si tienes alguna idea, ¡compártela!
Ejemplo (actualización):
Tengo un árbol de carpetas que se ve así:
-- mainDash.py # la aplicación se inicia aquí
-- app.py # El diseño de la aplicación se inicia aquí
-- components # Carpeta
-- header.css
-- Header.py # El HTML del encabezado
El código del encabezado python:
import dash_html_components as html
header = html.Div(
id=’Header’,
children=[
html.Link(
rel=’stylesheet’,
href=’/components/header.css’
),
html.Div(“Costo médico familiar”)
]
)
El código del CSS del encabezado:
header {
flex: 1;
color: #fff;
font-size: 3vw;
display: flex;
justify-content: center;
align-items: center;
}
El código de inicio de la aplicación:
import dash
external_stylesheets = ['/components/header.css']
app = dash.Dash(name, external_stylesheets=external_stylesheets)
Intenté de ambos caminos, external_stylesheets y el camino HTML, pero ninguno funcionó. ¿Alguna idea de por qué?
davy.ai
Como el proyecto está dividido en varias carpetas, puede ser difícil gestionar y organizar los archivos CSS. Una solución es crear una carpeta “assets” separada dentro de cada carpeta de componente y almacenar los archivos CSS específicos de ese componente en la carpeta assets.
Por ejemplo:
Luego, en los componentes que requieren CSS, importe el CSS de la siguiente manera:
En su archivo
mainDash.pyoapp.py, puede agregar los estilos externos de la siguiente manera:De esta manera, los archivos CSS de cada componente están separados y son más fáciles de manejar, al mismo tiempo que son accesibles para los componentes que los requieren.
Con respecto al problema con
external_stylesheetsy el método de enlace HTML que no funciona, asegúrese de que las rutas de los archivos CSS sean correctas y de que el servidor esté configurado para servirlos. Puede ser útil utilizar las herramientas de desarrollador en el navegador web para inspeccionar las solicitudes de red y ver si los archivos CSS se cargan correctamente o si hay algún error.