quarto-dev / quarto-dev/quarto-cli

Use custom SCSS theme without Bootstrap

Open
#8,890 11 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement html themes
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

Applying the theme options described here, I would like to render a document with no default bootstrap styling but am unable to provide my own custom SCSS and theme: none to achieve this.

Steps to reproduce

Given a .qmd document which looks like this:

---
title: "Reproducible Quarto Document"
format:
    html:
        theme:
        - none
        - custom.scss
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.

and an scss file in the directory which looks as follows:

/*-- scss:functions --*/
@function colorToRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
  }
  
  /*-- scss:defaults --*/
  $h2-font-size:          1.6rem !default;
  $headings-font-weight:  500 !default;
  
  /*-- scss:rules --*/
  h1, h2, h3, h4, h5, h6 {
    text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
  }
Expected behavior

I would expect the document to render without bootstrap styling (i.e. to apply the effect of theme: none or theme: pandoc), but then apply my custom SCSS styles.

Actual behavior

Instead, the document renders using the default bootstrap theme and then applies my custom SCSS styling (as per the behaviour here).

Your environment

VSCode on Windows, using WSL2.

Version: 1.86.2 (user setup)
Commit: 903b1e9d8990623e3d7da1df3d33db3e42d80eda
Date: 2024-02-13T19:40:56.878Z
Electron: 27.2.3
ElectronBuildId: 26908389
Chromium: 118.0.5993.159
Node.js: 18.17.1
V8: 11.8.172.18-electron.0
OS: Windows_NT x64 10.0.22621
Distributor ID: Ubuntu
Description:    Ubuntu 22.04.3 LTS
Release:        22.04
Codename:       jammy
Quarto check output
quarto check
Quarto 1.4.549
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.549
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Tex:  (not detected)

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.10.12
      Path: /bin/python3
      Jupyter: 5.7.1
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.3.2
      Path: /usr/lib/R
      LibPaths:
        - /home/rbowen/R/x86_64-pc-linux-gnu-library/4.3
        - /usr/local/lib/R/site-library
        - /usr/lib/R/site-library
        - /usr/lib/R/library
      knitr: 1.45
      rmarkdown: 2.25

[✓] Checking Knitr engine render......OK

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 by rendering the provided .qmd document with theme: none and custom.scss, then compare the generated HTML and CSS with the expected no-Bootstrap result. Trace how the HTML theme options and custom SCSS are combined. Done means custom.scss is applied while Bootstrap styling is omitted when theme: none is selected.

Written by the indexing model from the issue text.

Assessment

Tech stack
scss
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.