django-plotly-dash
django-plotly-dash copied to clipboard
Local CSS not applying to template
I am trying to apply local CSS to Dash. I have an 'assets' folder for the app containing an image and a CSS file. After running 'collectstatic', the assets appear seemingly where they should, in a directory with root 'STATIC_ROOT/dpd/assets' and the image is accessible as shown in the example 'demo_nine', but the CSS is not applying. Inspecting the source of the app, there is not any reference to the CSS in the underlying HTML. Is there an additional step needed to associate the styling with the app? Something like the following (which causes an error):
app = DjangoDash("app_name", serve_locally=True)
app.css.append_css("path_to_css")
It seems like this was resolved with #133, which makes me think I am missing a step.
Relevant version info:
dash==0.42.0
dash-bootstrap-components==0.6.0
dash-core-components==0.47.0
dash-html-components==0.16.0
dash-renderer==0.23.0
dash-table==3.6.0
Django==2.0.1
django-appconf==1.0.2
django-bootstrap==0.2.4
django-bootstrap4==0.0.8
django-plotly-dash==0.9.11
dpd-components==0.1.0
dpd-static-support==0.0.4
Flask==1.0.2
Flask-Compress==1.4.0
whitenoise==4.1.2```
This could be an issue. Can you check if a different member of the assets directory (eg an image file) is correctly served?
Image files are serving correctly. After doing collectstatic, I have two static files associated with my project, logo.png and style.css. I can access logo.png by referencing assets/logo.png from within my project. However, the style.css does not render. I can always do the workaround where I apply the CSS to the iframe from within the parent HTML file if need be.
Thanks for the update. This certainly sounds like files aren't getting added to the html unless explicitly listed.
I was having a similar issue with static files - whether stored locally or on Amazon S3. As a workaround, I ended up using the append_css and append_script methods from the DjangoDash class as follows:
================================================================= external_stylesheets = [ { 'external_url': 'https://path_to_file/mystylesheet_01.css', 'external_url': 'https://path_to_file/mystylesheet_02.css', },]
external_stylesheets = [ { 'external_url': 'https://path_to_file/myscript_01.js', 'external_url': 'https://path_to_file/myscript_02.js', },]
dashapp = DjangoDash(name='my_dash_app', serve_locally=False, expanded_callbacks=True, add_bootstrap_links=False, suppress_callback_exceptions = True, routes_pathname_prefix='/dashapp/' )
# Setup Dash Index String and Initial Layout
dashapp = init_dash(dashapp)
# Add external stylesheets
for stylesheet in external_stylesheets:
dashapp.css.append_css(stylesheet)
# Add external scripts
for script in external_scripts:
dashapp.scripts.append_script(script)
==================================================