Laravel custom color - laravel

Question

I would like to define some custom color in Laravel 6 but don't work.
My target is to add #dee2e6 color and called it custom-blue for whatever,
I try to add in 3 places and define it as a color and class. Only able to define
it as as a class. Here are my code.
_variables.scss
// Body
$body-bg: #f8fafc;
// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f0b274;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
$brand-primary: #0040c0;
$lwcpa-blue: #cddde1; // custom color
app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
$custom-blue: #cddde1;
.customcss{
color: #cddde1;
}
After " npm run dev " only one "#cddde1" in the public/css/app.css
public/css/app.css (last few lines)
.table .thead-dark th {
color: inherit;
border-color: #dee2e6;
}
}
.customcss {
color: #cddde1;
}
I try to search "#cddde1" in the public/css/app.css, only fine 1 entry, but I expect 3 entries.
Appreciated if anybody points out what is wrong. Thank you!
Laravel 6,
boostrap 4.5.2