Bootstrap 5 Vitejs undefined variable in $themed-colors Nuxt project

I am building the static app with Nuxtjs with Typescript. I am using Webpack as the default builder, which Nuxtjs recommend. But as the app gets bigger and bigger, Webpack, HMR takes more than 30s, and that is too much time wherewith Vitejs I HMR takes less than 3 seconds. So I decided to use Nuxtjs with Vitejs to use the nuxt-vite package and use it as a build module to build the app with Vitejs.

Everything seems working fine, but I'm having a problem with Bootstrap 5 SCSS. Using: style.scss which is a global SCSS file linked in nuxt.config.ts in this file, I'm import bootstrap as below

@import '@/node_modules/bootstrap/scss/bootstrap.scss';

this works under Webpack but with Vite gives an error

ℹ Preparing project for development                                                                                  17:03:42
ℹ Initial build may take a while                                                                                     17:03:42
ℹ Discovered Components: .nuxt/components/readme.md                                                                  17:03:42
✔ Builder initialized                                                                                                17:03:42
✔ Nuxt files generated   
                                                                                     
 ERROR  Undefined variable.                                                                                          17:03:48
  ╷
1 │ @each $color, $value in $theme-colors {
  │                         ^^^^^^^^^^^^^
  ╵
  node_modules/bootstrap/scss/helpers/_colored-links.scss 1:25  root stylesheet

  ╷
  1 │ @each $color, $value in $theme-colors {
  │                         ^^^^^^^^^^^^^
  ╵
  node_modules/bootstrap/scss/helpers/_colored-links.scss 1:25  root stylesheet
  at Object._newRenderError (node_modules/sass/sass.dart.js:13174:19)
  at Object._wrapException (node_modules/sass/sass.dart.js:13000:16)
  at _render_closure1.call$2 (node_modules/sass/sass.dart.js:81147:21)
  at _RootZone.runBinary$3$3 (node_modules/sass/sass.dart.js:27268:18)
  at _FutureListener.handleError$1 (node_modules/sass/sass.dart.js:25818:19)
  at _Future__propagateToListeners_handleError.call$0 (node_modules/sass/sass.dart.js:26116:49)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4539:77)
  at _Future._completeError$2 (node_modules/sass/sass.dart.js:25948:9)
  at _AsyncAwaitCompleter.completeError$2 (node_modules/sass/sass.dart.js:25602:12)
  at Object._asyncRethrow (node_modules/sass/sass.dart.js:4338:17)
  at node_modules/sass/sass.dart.js:12858:20
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:4363:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:25623:12)
  at _awaitOnObject_closure0.call$2 (node_modules/sass/sass.dart.js:25615:25)
  at _RootZone.runBinary$3$3 (node_modules/sass/sass.dart.js:27268:18)
  at _FutureListener.handleError$1 (node_modules/sass/sass.dart.js:25818:19)