Python Plotly Dash 有没有办法在资产文件夹之外使用 Css 文件？ / 拥有多个资产文件夹答案

【问题标题】：Python Plotly Dash Is there a way to use Css files outside the assets folder? / Have multiple assets foldersPython Plotly Dash 有没有办法在资产文件夹之外使用 Css 文件？ / 拥有多个资产文件夹
【发布时间】：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 的文件夹并将切换到文件的路径吗？我应该如何使用此路由将我拥有的所有 CSS 文件添加到列表中？
否，/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 请求。

标签： python css plotly plotly-dash plotly-python

【解决方案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 参数传递给应用程序之后它确实有效，我需要一种在应用程序启动后添加更多样式表的方法如果这不可能，那么即使我们找到了为什么它现在对我不起作用，我也无法使用该解决方案