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，但它仍然不起作用。我的问题是，如何将本地css与dash-bootstrap-component样式联系起来。

Answer 1

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

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

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

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

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