scss: undefined variable ($gray-700) - example from quarto doc

[c-marc]

Hi ! I'm trying to move some styling into a custom.scss but css preprocessing is failing when hitting bootstrap scss variables... I can't see what's wrong... I got back to the simplest example copying & pasting the example from the doc:

/*-- scss:defaults --*/
$h2-font-size:          1.6rem !default;
$headings-font-weight:  500 !default;
$body-color:            $gray-700 !default;

My qmd YAML has:

outpout:
  html:
    theme: 
      - default
      - custom.scss

Rendering failed with the following message (with $gray-700 underlined)

ERROR: Theme file compilation failed:
Error: Undefined variable.
754 │ $body-color: $gray-700 !default;

My understanding is that these bootstrap colors should be available. And the doc seems to imply that too. Could someone explain me what I'm failing to see ? That might be obvious... Many thanks !

EDIT: interestingly, the following modified scss file works and knows $gray-700:

/*-- scss:defaults --*/
$h2-font-size: 1.6rem !default;
$headings-font-weight: 500 !default;
//$body-color: $gray-700 !default;

/*-- scss:rules --*/
body {
  color: $gray-700;
}

[cscheid]

Can you try renaming that to .scss? In order to use scss variables, you need to provide a scss file.

[c-marc]

Sorry. This is an error in my question. My qmd is custom.scss, compiles as scss and renders correctly when I comment the line with $gray-700. Let me edit my question to correct my error.

[ivanlambert1975]

I have this situation too @c-marc /@cscheid.
Following the https://quarto.org/docs/output-formats/html-themes.html which refs
https://quarto.org/docs/output-formats/html-themes.html#theme-options
documentation, the out-of-the-box example @c-marc specified above doesn't work unless the //$body-color: $gray-700 !default; <------line is commented out.

The file paths are specified correctly - the example doesn't appear to work without the edit above.

RStudio 2023.03.0+386 "Cherry Blossom" Release (3c53477afb13ab959aeb5b34df1f10c237b256c3, 2023-03-09) for Windows
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) RStudio/2023.03.0+386 Chrome/108.0.5359.179 Electron/22.0.3 Safari/537.36

[dragonstyle]

This is a result of the way SCSS works. In SCSS, the first declaration of a variable typically defines the value of the variable through the rest of the compilation. This means, that in order to allow custom themes to override bootstrap values, we place their variable declarations ahead of the bootstrap variable declarations during compilation - this allows the custom scss themes to override those values. This also means that you can't use those values in your custom theme (since they appear after your custom theme variables during compilation).

This is typically not an issue as themes which specify colors will typically specify the color variables themselves or just use direct color values rather than variables.

[ellisbrown]

@c-marc
it's an incomplete example. $gray-700 is an undefined variable.

assign it a variable above your code, like

$gray-700: #495057 !default;

or copy a more complete array of variables like here
https://stackoverflow.com/questions/46930437/undefined-variable-error-in-gulp-when-adding-to-grey-scale-in-bootstrap-4-beta

[mcanouil]

@ellisbrown thanks for the reply, but it's a bit outdated.
Here the variable is already defined in Bootswatch themes.
The issues is the position in which it appears in the file which implies different merging order with Bootstrap SCSS.

This is all described in https://quarto.org/docs/output-formats/html-themes-more.html.