Plotly-Dash：链接外部/本地CSS

问题描述

我正在尝试链接外部/本地CSS，但是似乎没有链接。

我遵循以下链接中的示例：https://dash.plot.ly/external-resources

app.py

external_stylesheets = [
    dbc.themes.SLATE,{
        'href': 'custom.css','rel': 'stylesheet',}
]

app = dash.Dash(
            Meta_tags=[
                {"name": "viewport","content": "width=device-width,initial-scale=1"}
            ],external_stylesheets=external_stylesheets,)

加载应用程序时，custom.css文件夹中的/assets是空的。

custom.css

.tabs {
  background-color: #444,color: #adb5bd,verticalAlign: middle,font-size: 0.9375rem
}

.map-style {
  padding: 11% 0px 0px 5px;
}

.prop-style {
  padding: 0% 0px 0px 2em;
}

.price-style {
  padding: 5% 0px 0px 0.4em;
}

.market-style {
  padding: 5% 0px 0px 0.4em;
}

.date-picker-range {
  width: 300px;
}

我也尝试过/assets/custom.css，但仍然无法使用。我的问题是，如何将本地CSS与dash-bootstrap-component样式联系起来。

解决方法

假设您遵循您链接的教程中的目录结构：

- app.py
- assets/
    |-- typography.css
    |-- custom.css
    |-- custom-script.js

并且您的应用在您的 app.py 中有正确的名称：

# ...
app = dash.Dash(__name__)
# ...

那么 assets/custom.css 的内容应该会自动添加到您的 Dash 应用程序中，而无需链接到 external_stylesheets 中的文件。