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

【问题标题】：Plotly-Dash : Linking external / local CSSPlotly-Dash：链接外部/本地 CSS
【发布时间】：2020-12-03 06:28:03
【问题描述】：

我正在尝试链接外部/本地 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,
      )

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

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.css.config.serve_locally = True 添加到app.py。

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

【解决方案1】：

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

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

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

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

那么assets/custom.css的内容应该会自动添加到你的Dash应用中，不需要链接到external_stylesheets中的文件。

【讨论】：