Python Plotly Dash 有没有办法在资产文件夹之外使用 Css 文件？ / 拥有多个资产文件夹
Posted
技术标签:
【中文标题】Python Plotly Dash 有没有办法在资产文件夹之外使用 Css 文件？ / 拥有多个资产文件夹【英文标题】：Python Plotly Dash Is there a way to use Css files outside the assets folder? / Have multiple assets folders 【发布时间】：2021-12-30 21:32:16 【问题描述】：大家好，我一直在做一个相当大的项目，当我的项目被分成很多文件夹时，将所有 CSS 文件放在一个文件夹中真的很麻烦：
-- 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
它不断地延伸到不同的组件，现在我正在寻找一种解决方案，比如我们在反应中使用 CSS 的方式，将使用它的文件的 CSS 放在同一个文件夹中导入 CSS，然后使用它.或者为每个大组件（如页眉、页脚、侧边导航栏等）打开一个资产文件夹...
感谢您抽出宝贵时间阅读！如果您有任何想法，请务必分享！
示例：（更新） 我有一个这样的文件夹树：
-- mainDash.py # the app is initiated here
-- app.py # The app layout is initiated here
-- components # Folder
-- header.css
-- Header.py # The header html
头部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")
]
)
头部CSS代码：
#header
flex: 1;
color: #fff;
font-size: 3vw;
display: flex;
justify-content: center;
align-items: center;
应用启动代码：
import dash
external_stylesheets = ['/components/header.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
试过 external_stylesheets 方式和 HTML 链接方式都不知道为什么？
【问题讨论】：
因为你错过了第二步：路由。请参阅下面的答案/cmets。 @EricLavault 我仍然不知道如何使用它我应该有一个名为 res 的文件夹并将/res/<path:filepath> 匹配以/res/ 开头的request 路径（相对于应用程序基本url），例如/res/any/component/you/want.css，所以当路由回调是调用时，它接收（在本例中）参数 filepath=any/component/you/want.css，然后返回flask.send_from_directory('./', filepath)，字面意思是发送文件any/component/you/want.css 相对于目录的内容。 './' (the cwd of your app), not res/`。同样，“res/”只是一个路由选项，不是强制性的，用于确保您的回调仅处理 res/ources 请求。
【参考方案1】：
首先是包含样式表，有两种可能（一种不排除另一种）：
将 css 文件包含为 external_stylesheets，以便它们与其他样式表一起加载到 <head> 标记中，例如。 ：
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)
在布局中包含 css 文件作为您需要的链接组件，例如。 ：
html.Div(id='Header', children=[
html.Link(
rel='stylesheet',
href='/res/components/Header/assets/title.css'
),
html.Div('The Header')
])
一旦你包含了样式表，第二件事就是将这些文件作为静态资源提供，这意味着做一些路由（否则 Dash/Flask 将提供 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)
您注意到我在 URL 前添加了 res，这只是为了简化路由匹配并且更安全一点，您可以使用 static 或其他任何东西（只是不要使用 assets，它由 Dash 保留)，或者只过滤以 .css 结尾的文件路径。
【讨论】：
第一个和第二个解决方案不起作用，加上第一个解决方案并没有真正帮助，关键是找到一种更清洁的工作方式，将所有 CSS 文件路径添加到一个文件绑定中带来麻烦，因为我需要在启动应用程序之前编写它们，所以我之前无法将它们添加到列表中。第二种方法太麻烦了，即使它有效，我正在寻找一种解决方案，它可以让我添加一个适用于整个应用程序而不仅仅是一个 HTML 组件的 CSS 文件。 第三个解决方案，如果你能详细说明一下就好了。我似乎无法理解它是如何工作的或如何实现它。 @Matan 我没有提到“在一个文件中添加所有 CSS 文件路径”，这是一个很大的误解：首先是包含样式表 （我提出了 2 个选项）AND 第二件事是将这些文件作为静态资源提供服务。没有第三种解决方案。现在对于包含 css 文件，第一个选项正是您所要求的：您可以在“external_stylesheets”数组中引用尽可能多的文件，只需相应地进行路由。 Dash 默认使用 Flask 服务器，所以我以它为例。我编辑了答案以防止混淆。 更多关于@server.route的信息可以参考Flask documentation。
由于某种原因，第一个解决方案对我不起作用..即使在我将 external_stylesheets 参数传递给应用程序之后它确实有效，我需要一种在应用程序启动后添加更多样式表的方法如果这不可能，那么即使我们找到了为什么它现在对我不起作用，我也无法使用该解决方案以上是关于Python Plotly Dash 有没有办法在资产文件夹之外使用 Css 文件？ / 拥有多个资产文件夹的主要内容，如果未能解决你的问题，请参考以下文章
在 Plotly Dash 图表中放置刻度标签 - Python
Plotly Dash：在 Python 中绘制 networkx
即使屏幕尺寸在 Dash-plotly 中使用 python 改变，如何在导航栏中固定按钮的位置