Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Website projects ignore `$border-color` and `$border-radius` defaults because of an invalid `scss:variables` boundary in `quarto-listing.scss`

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#15,176 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@Don-Yin arbeitet bereits daran.

Seit 26.10.2026.

  • #15197 von @Don-Yin — offen

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
74/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
sass
Bereich
build-system

Rechercherichtung

Lies src/core/sass.ts im Bereich der Zeilen 201–202 und untersuche src/resources/projects/website/listing/quarto-listing.scss im Bereich der Zeilen 4 und 80–98. Bestätige, wie der Layer-Parser die Grenze scss:variables verarbeitet, rendere dann die bereitgestellte Website-Reproduktion und vergleiche ihr CSS mit der eigenständigen Ausgabe. Fertig ist die Aufgabe, wenn die Website die Standardwerte $border-color und $border-radius des Themes berücksichtigt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug websites
I have:
  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide
Bug description

In a website project, a theme that sets $border-color or $border-radius with !default in scss:defaults has no effect.
The same theme works in a standalone document.
Colours and radii that a theme sets for borders, form controls and cards are replaced by Quarto's own values.

quarto-listing.scss starts the functions layer with a valid boundary.

A later line is /*-- scss:variables --*/, followed by variables such as $border-color: $gray-300 !default; and $border-radius: 0.25rem !default;.

The layer parser only accepts uses, functions, rules, defaults and mixins, so variables is read as a comment.

Those variables therefore stay in the functions layer.
Functions are written before all defaults, so they are set first, and the !default of a theme or user layer that comes later is ignored.

With QUARTO_SAVE_SCSS set, the saved file shows the order.
$border-color: $gray-300 !default; is at line 620, inside the 'functions' section from Quarto (lines 490 to 1036).
The theme's $border-color: #ff0000 !default; is at line 1042, under Defaults from user-defined SCSS.

#13960 reports the same kind of bad delimiter for title-block.scss, where the variables are all null !default and nothing breaks.
This file is different, because its variables shadow real theme variables.

Steps to reproduce

custom.scss:

/*-- scss:defaults --*/
$border-color: #ff0000 !default;
$border-radius: 1rem !default;

_quarto.yml of a website project:

project:
  type: website
website:
  title: t
format:
  html:
    theme: [default, custom.scss]

index.qmd is any page with a title.
For comparison, render a standalone document with the same theme: [default, custom.scss].

quarto render
grep -o -- '--bs-border-color:[^;]*' _site/site_libs/bootstrap/bootstrap-*.min.css
grep -o -- '\.form-control{[^}]*}' _site/site_libs/bootstrap/bootstrap-*.min.css | grep -o 'border-radius:[^;]*'
Actual behavior
Output --bs-border-color .form-control border-radius
website project #dee2e6 .25rem
standalone document #ff0000 1rem

Rendered in a website project, the form control and the button keep Quarto's .25rem radius and the grey border:

A table, a form control and a button in a website project: the form control has a grey border and the corners are barely rounded.

The same theme in a standalone document:

The same page as a standalone document: the form control has a red border and round corners, and the button is rounded.

Expected behavior

The !default values of the theme apply in a website project, as they do in a standalone document.

Your environment
  • IDE: none, terminal only
  • OS: macOS (Darwin 27.0.0, Apple Silicon)
Quarto check output
Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 69592e5c1718d3e1b2f3d11e757d32e23a16af67
Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
476
Ø Merge
15 Std. 45 Min.
Gemergte PRs (30 T.)
113

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus quarto-dev/quarto-cli

Alle Issues in quarto-dev/quarto-cli

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.