Telerik KendoReact Custom Theme

Question

Using kendo UI ThemeBuilder I generated ZIP package that contains Sass, CSS, and custom font files. now the the kendoReact recommends to use it as an npm package but I want more control over the styles so after extracting the zip file I added the scss files in my application's src directory but its giving me these errors:

 @import '~@progress/kendo-font-icons/scss/all';
     │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
    src/index.scss 82:9  root stylesheet
      at Object.wrapException (/home/thebks/Documents/op-frontend/node_modules/sass/sass.dart.js:2107:43)
      at /home/thebks/Documents/op-frontend/node_modules/sass/sass.dart.js:81933:25
      at _wrapJsFunctionForAsync_closure.$protected (/home/thebks/Documents/op-frontend/node_modules/sass/sass.dart.js:4887:15)
      at _wrapJsFunctionForAsync_closure.call$2 (/home/thebks/Documents/op-frontend/node_modules/sass/sass.dart.js:33983:12)
      at _awaitOnObject_closure.call$1 (/home/thebks/Documents/op-frontend/node_modules/sass/sass.dart.js:33971:32)
      at Object._rootRunUnary (/home/thebks/Documents/op-frontend/node_modules/sass/sass.dart.js:5279:18)
      at StaticClosure.<anonymous> (/home/thebks/Documents/op-frontend/node_modules/sass/sass.dart.js:115715:16)
      at _CustomZone.runUnary$2$2 (/home/thebks/Documents/op-frontend/node_modules/sass/sass.dart.js:35407:39)
      at _Future__propagateToListeners_handleValueCallback.call$0 (/home/thebks/Documents/op-frontend/node_modules/sass/sass.dart.js:34470:51)
      at Object._Future__propagateToListeners (/home/thebks/Documents/op-frontend/node_modules/sass/sass.dart.js:5072:93)

I have installed bootstrap as well by running this command npm install @progress/kendo-theme-bootstrap but im still getting the error.

I created the project using Vite and then added KendoReact to it using npm install --save @progress/kendo-react-editor @progress/kendo-react-intl @progress/kendo-react-buttons @progress/kendo-react-dropdowns @progress/kendo-react-dialogs @progress/kendo-react-inputs @progress/kendo-react-layout @progress/kendo-react-popup @progress/kendo-react-pdf @progress/kendo-react-progressbars @progress/kendo-drawing @progress/kendo-licensing @progress/kendo-svg-icons

I tried adding the scss files in my src directly thinking that it would apply the styles that were created using the Telerik ThemeBuilder. I thought this way I could have more control over the theme but im facing errors.