Use custom SCSS theme without Bootstrap

[rossbowen]

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
/*-- 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

[mcanouil]

There is no Bootstrap in Reveal.js.

Note that the link you shared is for HTML not revealjs format. See https://quarto.org/docs/presentations/revealjs/themes.html.

[rossbowen]

Hey @mcanouil - sorry if I misunderstand, but I intended to report about the HTML format, not revealjs format.

[mcanouil]

I apologise, I completely misread with another thread. You can disregard my comment.

[mcanouil]

I don't think setting none removes Bootstrap as it is used for many features inside Quarto. If you provide a SCSS file it has to be complete (similarly to the other theme files) and you don't need to set anything but your file. If you want to override the default, provide a complete file.

If you really want to remove Bootstrap (this has been discussed in several other threads), you need to use "minimal" (see https://quarto.org/docs/output-formats/html-basics.html#minimal-html). Note that this will completely messed up the layout as it is based on Bootstrap.

[mcanouil]

Could you clarify what exactly you are trying to achieve?

[rossbowen]

So for contrast, say I had a .qmd which looks like this.

---
title: "Reproducible Quarto Document"
format:
    html:
        theme: none
---

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.

Notice now I have provided a single argument, `theme: none` instead of an array including some custom SCSS. For me, this renders in my browser with only the browser's default CSS - no bootstrap.

So in my example, I would like the document to render only the browser's default CSS, no bootstrap, but _also_ applying any custom SCSS I provide.

[mcanouil]

Did you try simply replacing none with your custom? It should override thus not using the default.

[rossbowen]

So in that case, it applies my custom SCSS on top of the default bootstrap theme, so I still get lots of bootstrap styling in my output.

I don't want any bootstrap (which is why I'm trying to set theme: none).

[cderv]

I would like the document to render only the browser's default CSS, no bootstrap, but also applying any custom SCSS I provide.

Our doc may not be enough clear on this but the SCSS handling is for now bound to Bootstrap usage. The document on the design for Quarto Themes explains how custom SCSS theme file is layered with Bootstrap SCSS files. https://quarto.org/docs/output-formats/html-themes-more.html#bootstrap-bootswatch-layering

If you don't want to use bootstrap, you'll need to provide you styling as a regular CSS file (https://quarto.org/docs/output-formats/html-basics.html#css-styles). You can have a pre-render step to render your SCSS project to a CSS file to use with Quarto.

For now, Quarto won't run SCSS for you unless layered with Bootstrap theme.

Also theme: none is for no internal CSS inclusion at all, and theme: pandoc to use the CSS feature from Pandoc with usage of Pandoc's variables.

Note as said already: if you opt-out bootstrap completely, some Quarto features won't work. There is maybe a path where you provided custom themes that opt out certain feature or bootstrap style you don't want.

Anyhow, I hope this helps understand current behavior. I'll rename issue to make it clear.

[mcanouil]

I see. So the issue is not really that none + something = default + something, but more like something = something + default which is what we are saying in the documentation.

• none + custom.scss should be strictly equal to custom.scss and not default + custom.scss (use css instead?)
• documentation implies that theme: custom.scss overrides everything and has to be complete when it seems it's default + custom.scss

[rossbowen]

Thanks both!

I guess from my reading of the docs, I saw the example in this section which shows how you can mix SCSS with a bootstrap theme:

theme:
  - cosmo
  - custom.scss

And so I tried to apply that pattern using none, but as has been explained it just doesn't work in that way.

But I've got a workaround by providing just CSS instead, and maybe my incorrect approach could work in future.