How to use import for bootstrap in scss

[acederberg]

Description

Hi!

I would like to use bootstrap utilities to define some extra scss classes. However, I do not know where quarto stores the scss files (I would assume that I can find something like the quarto scsss dist somewhere in my project but I am yet to find it.

For instance, I would like to do something like

/*-- scss:uses --*/

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";


/*-- scss:rules --*/

$utilities: map-merge($utilities,
    ("border-indigo": (property: border-color,
        class: border,
        values: (indigo: --bs-indigo // Bootstrap's indigo color
        ))));

but I need to know where bootstrap exists so that I may import the necessary tools.

[cderv]

Quarto HTML Theming system will layer your custom theme with Bootstrap framework. See https://quarto.org/docs/output-formats/html-themes-more.html

So any bootstrap content should be available without you needing to import it.

However, I don't think our layering system allows to modify this part of Bootstrap.

utilities is loaded as part of the bootstrap layer

quarto-cli/src/resources/formats/html/bootstrap/dist/scss/bootstrap.scss

Line 9 in 5978971

@import "utilities";

and the API creates the utility class in the same file

quarto-cli/src/resources/formats/html/bootstrap/dist/scss/bootstrap.scss

Lines 47 to 48 in 5978971

	// Utilities
	@import "utilities/api";

This bootstrap.scss is loaded as a single rule

quarto-cli/src/format/html/format-html-shared.ts

Lines 103 to 106 in 5978971

	export const bootstrapRules = () => {
	return Deno.readTextFileSync(
	join(bootstrapResourceDir(), "bootstrap.scss"),
	);

So it seems there is no way to add between the utilities definitions and its usage for class creation

However, you can add to it because you can define $utilities first, and then bootstrap will add to it; So you can't modify it by you can add to it.

Your example needs some fixing though as --bs-indigo is a CSS variable.

---
title: "test"
format: 
  html:
    theme: custom.scss
---

# Content

The below uses the utility class

::: {.border-indigo style="border-style: dashed;"}
Border with custom color
:::

This does not use it

::: {style="border-style: dashed;"}
Border without custom color
:::

Hope it helps understand.

If you want to do more, it needs a feature request in Quarto to allow more specific bootstrap layering customization.

Hope it helps

[cderv]

And I forgot to share the SCSS I used 🤦

/*-- scss:defaults --*/

$utilities: (
  "border-indigo": (
    property: border-color,
    class: border,
    values: (
      indigo: var(--bs-indigo) // Bootstrap's indigo color as CSS variable
      )
    )
  );

[acederberg]

Thank you!

It looks like the following snippet works:

/*-- scss:uses --*/

$utilities: (
  "border-indigo": (property: border-color,
    class: border,
    values: (indigo: rgb(0, 255, 0)))
);

I substituted bright green since I get the error that indigo is not defined at that point. I put it in defaults instead and it worked:

/*-- scss:defaults --*/

$utilities: (
  "border-indigo": (property: border-color,
    class: border,
    values: (indigo: $indigo))
);

For now this works since I don't want to modify the values in utilities. However, I suppose the feature might be useful for those who want to customize further.

[cderv]

/*-- scss:uses --*/

This part is for specific content that is inserted in the layering. It is meant to insert @use part of SCSS
https://sass-lang.com/documentation/at-rules/use/

I put it in defaults instead and it worked:

defaults is where variable are defined and the layering order is inversed to other layer
https://quarto.org/docs/output-formats/html-themes-more.html#bootstrap-bootswatch-layering