Plotly-Dash : Linking external / local CSS

Question

I am trying to link an external/local CSS, however, it doesn't seem to be linked.

I followed the example in this link: 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,
      )

when I load the app, the custom.css from /assets folder is empty.

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;
}

I have also tried /assets/custom.css and it still doesn't work. My questions, how do you link a local css with dash-bootstrap-component style.

Answer 1

Assuming you follow the directory structure in the tutorial you linked:

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

and your app has the correct name in your app.py:

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

Then the content of assets/custom.css should be automatically added to your Dash app, without the need to link to the file in external_stylesheets.