why sass compiler says undefined variable - css

Question

i am using bootstrap v5 using npm and using sass compiler to compile the scss. i want to customize .btn-primary .so in my dirctory _button.sccs file i made a .btn-primary class with icluding the button-variant mixin given from bootstrap.
but at compiling time it gives an error.
The code is below :
This is my _custom.scss file.
$yellow: #f8b534;
$small: 576px;
$medium: 768px;
$large: 992px;
//bootstrap imported
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
#import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Copy
// 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/mixins";
// 4. Include any optional Bootstrap components as you like
#import "../node_modules/bootstrap/scss/root";
#import "../node_modules/bootstrap/scss/reboot";
#import "../node_modules/bootstrap/scss/type";
#import "../node_modules/bootstrap/scss/images";
#import "../node_modules/bootstrap/scss/containers";
#import "../node_modules/bootstrap/scss/grid";
Then my _button.scss file:
#use '../custom' as *;
$btn-padding-y: $input-btn-padding-y;
$btn-padding-x: $input-btn-padding-x;
$btn-font-family: $input-btn-font-family;
$btn-font-size: $input-btn-font-size;
$btn-line-height: $input-btn-line-height;
$btn-white-space: null; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm: $input-btn-padding-y-sm;
$btn-padding-x-sm: $input-btn-padding-x-sm;
$btn-font-size-sm: $input-btn-font-size-sm;
$btn-padding-y-lg: $input-btn-padding-y-lg;
$btn-padding-x-lg: $input-btn-padding-x-lg;
$btn-font-size-lg: $input-btn-font-size-lg;
$btn-border-width: $input-btn-border-width;
$btn-font-weight: $font-weight-normal;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width: $input-btn-focus-width;
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
$btn-disabled-opacity: .65;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);
$btn-link-color: $link-color;
$btn-link-hover-color: $link-hover-color;
$btn-link-disabled-color: $gray-600;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius;
$btn-border-radius-sm: $border-radius-sm;
$btn-border-radius-lg: $border-radius-lg;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
$btn-hover-bg-shade-amount: 15%;
$btn-hover-bg-tint-amount: 15%;
$btn-hover-border-shade-amount: 20%;
$btn-hover-border-tint-amount: 10%;
$btn-active-bg-shade-amount: 20%;
$btn-active-bg-tint-amount: 20%;
$btn-active-border-shade-amount: 25%;
$btn-active-border-tint-amount: 10%;
.btn-primary {
#include button-variant(
$background,
$border,
$color: color-contrast($background),
$hover-background:
if(
$color == $color-contrast-light,
shade-color($background, $btn-hover-bg-shade-amount),
tint-color($background, $btn-hover-bg-tint-amount)
),
$hover-border:
if(
$color == $color-contrast-light,
shade-color($border, $btn-hover-border-shade-amount),
tint-color($border, $btn-hover-border-tint-amount)
),
$hover-color: color-contrast($hover-background),
$active-background:
if(
$color == $color-contrast-light,
shade-color($background, $btn-active-bg-shade-amount),
tint-color($background, $btn-active-bg-tint-amount)
),
$active-border:
if(
$color == $color-contrast-light,
shade-color($border, $btn-active-border-shade-amount),
tint-color($border, $btn-active-border-tint-amount)
),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
)
};
But when compiling gives this error in below:
Error: Undefined variable.
╷
49 │ $background,
│ ^^^^^^^^^^^
╵
scss\components\_button.scss 49:3 #use
scss\sections\_navbar.scss 2:1 #use
scss\style.scss 6:1 root stylesheet