plotly / plotly/dash

Dash automatically includes SCSS files in the asset folder as stylesheets in the html head

Open
#1,684 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

Describe your context
Please provide us your environment, so we can easily reproduce the issue.

dash                      1.20.0
dash-bootstrap-components 0.12.3a1
dash-core-components      1.16.0
dash-html-components      1.1.3
dash-renderer             1.9.1
dash-table                4.11.3
  • if frontend related, tell us your Browser, Version and OS

    • Not frontend related

Describe the bug

When there are .scss files in the assets folder, Dash will link these files in the html file as css files. This is an example of what Dash is linking now

<link rel="stylesheet" href="/assets/style.scss?m=1625666161.599422">
<link rel="stylesheet" href="/assets/dist/_functions.scss?m=1625656854.6298916">
<link rel="stylesheet" href="/assets/dist/_mixins.scss?m=1625666146.3466384">
<link rel="stylesheet" href="/assets/dist/_variabless.scss?m=1625666140.98121">
<link rel="stylesheet" href="/assets/dist/style.css?m=1625666162.0801146">

Expected behavior

Dash should ignore .scss files and don't put them in the html file. It should only link the following

<link rel="stylesheet" href="/assets/dist/style.css?m=1625666162.0801146">

I would guess the issue lies in the _on_assets_change and the _walk_assets_directory functions. These functions look for css in the following manner

filename.endswith("css")

and should probably be replaced by

filename.endswith(".css")

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in dash/dash.py, reading _on_assets_change and _walk_assets_directory, and reproduce the asset scan with the example SCSS and CSS files. The work is done when SCSS files are ignored and only the compiled style.css is linked in the HTML head.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend, web-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.