Vue 3: Customize Bootstrap 5 via SCSS?

I am writing a Vue 3 application, and would like to use Bootstrap 5 as the CSS framework. I'd like to be able to override some of the variables for customization. I've followed a couple tutorials I found online, but am clearly doing something wrong because I do not see my variable overrides being applied. Here's what I've done.

In my project directory, I ran:

npm i bootstrap @popperjs/core

That installed Bootstrap as a dependency. Based off this tutorial, I created a file called custom.scss to import the variables Bootstrap scss files. That file looks like this:

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../../../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/variables-dark";

// 4. Include any default map overrides here
// All you need are in bootstrap documentation

// 5. Include remainder of required parts
@import "../../../node_modules/bootstrap/scss/maps";
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../../../node_modules/bootstrap/scss/accordion";
@import "../../../node_modules/bootstrap/scss/alert";
@import "../../../node_modules/bootstrap/scss/badge";
@import "../../../node_modules/bootstrap/scss/breadcrumb";
@import "../../../node_modules/bootstrap/scss/button-group";
@import "../../../node_modules/bootstrap/scss/buttons";
@import "../../../node_modules/bootstrap/scss/card";
@import "../../../node_modules/bootstrap/scss/carousel";
@import "../../../node_modules/bootstrap/scss/close";
@import "../../../node_modules/bootstrap/scss/containers";
@import "../../../node_modules/bootstrap/scss/dropdown";
@import "../../../node_modules/bootstrap/scss/forms";
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/grid";
@import "../../../node_modules/bootstrap/scss/helpers";
@import "../../../node_modules/bootstrap/scss/images";
@import "../../../node_modules/bootstrap/scss/list-group";
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/modal";
@import "../../../node_modules/bootstrap/scss/nav";
@import "../../../node_modules/bootstrap/scss/navbar";
@import "../../../node_modules/bootstrap/scss/offcanvas";
@import "../../../node_modules/bootstrap/scss/pagination";
@import "../../../node_modules/bootstrap/scss/placeholders";
@import "../../../node_modules/bootstrap/scss/popover";
@import "../../../node_modules/bootstrap/scss/progress";
@import "../../../node_modules/bootstrap/scss/reboot";
@import "../../../node_modules/bootstrap/scss/spinners";
@import "../../../node_modules/bootstrap/scss/tables";
@import "../../../node_modules/bootstrap/scss/toasts";
@import "../../../node_modules/bootstrap/scss/tooltip";
@import "../../../node_modules/bootstrap/scss/transitions";
@import "../../../node_modules/bootstrap/scss/type";
@import "../../../node_modules/bootstrap/scss/utilities";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../../../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

Now, I want to customize the styling and override the text-bg-primary variable. To do that, I added

$text-bg-primary: limegreen !default;

to the custom.scss file. My expectation is that this code will now have a lime green background:

<p class="text-bg-primary">Hello, world!</p>

Finally, I imported all of the Bootstrap CSS and my customization within main.ts:

import "bootstrap/dist/js/bootstrap";
import "bootstrap/dist/css/bootstrap.css";
import "@/assets/sass/custom.scss";

However, I still see the text with the default blue background. I've restarted my app using npm run serve. I've moved around my variable override code within custom.scss, thinking positioning may have something to do with it. Nothing has addressed the issue. I'm sure I'm doing something simple wrong here. Any advice?

text-bg-* are utility classes, derived from SASS variables like $primary, $danger, etc.

You can either

1. Override $primary, so ALL primary related classes including text-bg-primary are affected (it would go after step 1).

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import '../../../node_modules/bootstrap/scss/functions';

$primary: limegreen;

...

2. Override $utilities so ONLY text-bg-primary class is updated (it would go between steps 6 and 7)

// 6. Optionally include any other parts as needed
...
@import '../../../node_modules/bootstrap/scss/utilities';

$utilities: map-merge(
  $utilities,
  (
    'text-bg-primary': (
      property: background-color,
      class: text-bg,
      values: (
        'primary': limegreen
      ),
    ),
  )
);

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import '../../../node_modules/bootstrap/scss/utilities/api';

It is ok to combine them so all primary classes are one color defined by $primary and only text-bg-primary is a different color defined by $utilities.

Stackblitz demo