django-plotly-dash 在本地提供 css 文件答案

【问题标题】：django-plotly-dash serve css files locallydjango-plotly-dash 在本地提供 css 文件
【发布时间】：2020-07-22 09:22:27
【问题描述】：

我正在尝试使用 django-plotly-dash 在 DjangoDash 应用程序中本地提供 css 文件。

简单示例.py

app = DjangoDash('SimpleExample', serve_locally=True)
app.css.append_css("path_to_css")
app.layout = html.Div([
    html.Div(
        className="app-header",
        children=[
            html.Div('Plotly Dash', className="app-header--title")
        ]
    ),
    html.Div(
        children=html.Div([
            html.H5('Overview'),
            html.Div('''
                This is an example of a simple Dash app with
                local, customized CSS.
            ''')
        ])
    )
])

simpleexample.html

{% extends 'base.html' %}
{% load static %}
{% block content %}
{% load plotly_dash %}

    {% plotly_app name='SimpleExample' ratio=0.45 %}
    </div>

{% endblock %}

header.css 和 topography.css 是此处描述的文件：https://dash.plotly.com/external-resources。

根据这些：https://github.com/GibbsConsulting/django-plotly-dash/issues/121 和https://github.com/GibbsConsulting/django-plotly-dash/issues/133，应该修复与此相关的问题。

但是 css 样式不渲染--

我在这里缺少什么？在上面的 github 问题中有一个建议，我们可以使用 django 模板而不是 iframe。我找不到太多关于这方面的文档——有人能指点我吗？

谢谢。

【问题讨论】：

我尝试了 app = DjangoDash('SimpleExample', external_stylesheets=external_stylesheets) 以及包含 css 文件的 external_styleshteets 的 url - 它也不起作用。
终于用plotly_direct标签解决了。如果有人感兴趣，我在这里找到了文档——github.com/GibbsConsulting/django-plotly-dash/blob/master/docs/… 和 django-plotly-dash.readthedocs.io/en/latest/template_tags.html。

标签： django flask plotly-dash

【解决方案1】：

app = DjangoDash('Home',add_bootstrap_links=True)  
app.css.append_css({ "external_url" : "/static/assets/style.css" })

将您的资产文件夹放在 Django 静态文件夹中

如果你得到 Python 错误：没有名为 bootstrap4.bootstrap 的模块试试

    pip install "django_bootstrap4==1.1.1"

或

    pip install django_bootstrap4

【讨论】：

【解决方案2】：

<!-- templates/base.html -->
<!DOCTYPE html>
<html>
    <head>
    ...
    {% load plotly_dash%}
    ...
    {% plotly_header %}
    ...
    </head>
    <body>
    ...
    {%plotly_direct name="SimpleExample"%}
    ...
    </body>
    ...
    {% plotly_footer %}
</html>

【讨论】：