Bootstrap 5 Laravel 10 - customize colors

Hello,

I am trying to customize bootstrap 5 colors in a laravel 10 project.

I followed this tutorial:

https://www.initialapps.com/customizing-bootstrap-5-with-sass/

I don't see the new class I try to create ('my-yellow') or the new color I assign to 'primary'.

vite.conig.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/admin/admin.scss', 
                'resources/admin/admin.js',
                'resources/assets/js/app.js',
                'resources/assets/sass/app.scss'
            ],
            refresh: true,
        }),
    ],
});

In app.scss:

// 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
//@import "variables";
$primary: #D4CBE5;

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/variables-dark";



// 4. Include any default map overrides here
// Create your own map
$custom-colors: (  
  "my-yellow": $indigo-900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

// Bootstrap
//@import "node_modules/bootstrap-sass3/assets/stylesheets/bootstrap";
@import "../../../node_modules/bootstrap/dist/css/bootstrap";

// bring in main
@import "main";

I have this in my layout:

@vite(['resources/assets/sass/app.scss'])

In my blade:

<a class="btn btn-lg btn-my-yellow" href="#" role="button">Get Your Beans</a>

The link displays as simple text without the background color.

If I change it to:

<a class="btn btn-lg btn-primary" href="#" role="button">Get Your Beans</a>

I see bootstrap's primary color and not the one I assigned.

Why is that?