Linking external / local css

Dash Python
1

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

I followed the example in this link: Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly

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.

2

Have you tried visiting http://127.0.0.1:8050/assets/custom.css in your browser? If Dash has picked your CSS properly it should be accessible there (replace http://127.0.0.1:8050 with the appropriate URL if not running locally with default port).

It’s possible this post might be relevant, the fix there was to add __name__ to the Dash constructor.

3

Adding __name__ to dash constructor was the fix. Thx.