Trying to build custom kendo scss theme inside Vite project but it fails

[Vincent]

Hello,

I'm trying to use the custom kendo scss theme inside my Vite project but I'm getting errors when it tries to compile the theme.

Here I've made a reproduction of the problem:

Vitejs (forked) - StackBlitz

Does anyone know what I'm missing here?

 

Thanks in advance,

Vincent

[Emil]

Hello Vincent,

I have made a working example using the code you've shared.

In the above example, I have configured vite.config.js file to include the styles from the /src/assets folder and also import the theme inside App.vue file as follows:

import '@progress/kendo-theme-default/dist/all.scss';

I hope this helps.

Regards,
Emil
Progress Telerik

[Vincent]

Unfortunately I'm still getting an error:

[plugin:vite:css] Can't find stylesheet to import.
  ╷
1 │ @import "~@progress/kendo-theme-default/scss/core/functions/_index.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

Vitejs (forked) - StackBlitz

When I'm trying to add a DropDownList with a Kendo Bootstrap theme. I'm also trying to keep the stylesheet small by only including the scss file for the dropdownlist

[Vincent]

I've figured out how to get it working. You simply need to add the following to your vite.config.js:

resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~bootstrap': 'bootstrap',
      '~@progress/kendo-theme-default': '@progress/kendo-theme-default',
      '~@progress/kendo-theme-bootstrap': '@progress/kendo-theme-bootstrap',
      '~@progress/kendo-theme-default/scss/common/_base.scss':
        '@progress/kendo-theme-default/scss/common/_base.scss',
    },
  },

Here's a working stackblitz example for others who may run into this issue:

Vitejs (forked) - StackBlitz