quarto-dev / quarto-dev/quarto-cli
Use custom SCSS theme without Bootstrap
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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