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

Question

我正在尝试链接一个外部/本地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，但仍然不起作用。我的问题是，如何使用dash-bootstrap-component样式链接本地CSS。

- kms

---

尝试在app.py中添加app.css.config.serve_locally = True。 - Flavia Giammarino

Answer 1

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

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

并且在你的app.py文件中，你的应用程序名称是正确的：

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

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

- xhluca