can't use custom scss in css parameter in rmarkdown

[mhollander]

Perhaps I'm doing something wrong, but I'm unable to make changes to the _variables.scss using the css parameter in the yaml of my rmarkdown file.

Reprex: test.Rmd file:

---
output:
  html_document:
    theme: 
      version: 4
    css: new_style.scss
    self_contained: FALSE
---

<h1>testing</h1>

new_style.scss ` $h1-font-size: 10rem;

` My expectation is that this should alter the computed style sheet to change the h1 font to 10x the normal font size. It does not; instead it leaves it at 40px (2.5rem on a base font of 16px).

My expectation is based on my reading of: https://rstudio.github.io/bslib/articles/bslib.html#advanced-theming

Thank you for looking into this.

[cpsievert]

Seems as though you're looking to set variable default(s), which is different from adding additional rules (variable defaults modify Bootstrap's CSS rules) https://rstudio.github.io/bslib/articles/bslib.html#everything-else

---
output:
  html_document:
    theme: 
      version: 4
      h1-font-size: 10rem
---

[mhollander]

Ah ha! I'll try that. I don't think the documentation is particularly clear on that point--they focus more on using bslib in the context of shiny; it would be great to have a full example in rmarkdown as well.

Thank you for your help.

[mhollander]

Hello again:

I tried your suggestion and was able to make use of the yaml to update the variable defaults. However, I am unable to make an external scss file work for adding rules (and css):

test.rmd:

---
title: testing 123
output:
  html_document:
    theme:
      bootswatch: united
      version: 4
      heading_font: "nimbus_sans, sans-serif"
      base_font: "nimbus_sans, sans-serif"
      font-size-base: 14
      h1-font-size: 10rem;
    css: new_style.scss
---

Normal text 

::: {.custom-font}
Big?
:::

<h1>testing</h1>

new_style.scss:

$custom-font-size: 5rem;

.custom-font{
  font-size: $custom-font-size
}

I fear that I'm doing something wrong and this isn't a bug. If it is my fault, I would raise the issue that I raised in the prior comment, which is that the documentation isn't complete enough to explain how one would engage in this type of task. For the addition of one or two rules, it wouldn't be a problem to put all of the new rules directly in the main Rmd. But for a series of Rmds that all have a shared extensive custom stylesheet, an external file makes more sense.

TY

[cpsievert]

Your example appears to work for me, do you have the latest version of rmarkdown and bslib?

[mhollander]

It seems like in part my problem is due to sass caching. I reinstalled sass, rmarkdown, and bslib and was able to successfully recreate the above. However, when I tried to add a new rule to my scss file, apply it to something in my Rmd, and then knit, the resulting css file did not have the new rules. After banging my head against the wall for a while, I realized that there is some sort of caching thing happening.

So... how do I stop sass from caching as I am developing, knitting, etc...? I don't see anything in the bslib documentation about how to deal with this.

[cpsievert]

options(sass.cache=FALSE) https://rstudio.github.io/sass/reference/sass_cache_get.html

[mhollander]

I hate to be a dunce, but where would this go in my rmarkdown? I know I can place it in a sass block in an Rmarkdown file, but I would prefer to be able to specify this in the _output.yml or in the yml header for the RMarkdown, but I can't figure out how to get that to work.

e.g.:

title: testing 123
output:
  html_document:
    theme:
      bootswatch: united
      version: 4
      heading_font: "nimbus_sans, sans-serif"
      base_font: "nimbus_sans, sans-serif"
      font-size-base: 14
      h1-font-size: 10rem;
    self_contained: FALSE
    css: new_style.scss
    sass.cache: FALSE

[cpsievert]

options(sass.cache=FALSE) is R code, so put it in a R code chunk (or better yet, in your .Rprofile so you don't run into this again). BTW, if you use Shiny as well, I'd recommend putting shiny::devmode() in your .Rprofile instead, which will set this option as well as a few other useful ones for development

[github-actions[bot]]

This issue has been automatically locked. If you believe you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue.