SASS Compile error when kendo scss files are imported in stylesheet

[SysCo]

Hello,

I've an error regarding Kendo style when I import it into an SCSS file. Let's assume I want to customize Kendo theme, I have 4 scss files :

• _tokens.scss which contains color palette definition
• the kendo scss theme (kendo-theme-bootstrap in this case, but same issue with the default theme)
• _overrides.scss which may contains overrides (typhography, margin/padding on some components, etc)
• and a base.scss file containing basically the import of the 3 preceding files :
  

@import 'tokens';
@import '@progress/kendo-theme-bootstrap/dist/all';
@import 'overrides';

However, when I import my base.scss file into the Vue App (whether in the main.js or the App.vue), I've this error :

Plugin: vite:css
  File: /src/node_modules/@progress/kendo-theme-bootstrap/dist/all.scss:37542:173
  Error: expected ";".
        ╷
  37542 │             background-image: url('../../node_modules/@progress/kendo-theme-bootstrap/dist/k-map-get($_kendo-data-uris, $kendo-spreadsheet-insert-image-dialog-preview-img'));
        │                                                                                                                                                                             ^
        ╵
    node_modules/@progress/kendo-theme-bootstrap/dist/all.scss 37542:173  @import
    src/assets/kendo.scss 2:9                                             @import
    src/assets/base.scss 1:9                                              root stylesheet

If I import directly the kendo-theme-bootstrap scss file in the main.js or the App.vue, there is no error. Here is the StackBlitz reproducing the error:

https://stackblitz.com/edit/vitejs-vite-f63fqh

How can I resolve this ?

Best Regards,

Fabien / SYSCO

[SysCo]

Hello Ivan,

Yes, it is working with the file with interpolation !

[Tony]

Hi Ivan,

We're running into this same issue with KendoReact using Vite. Will you be distributing updated theme scss files with interpolation for that line?

[Ivan Zhekov]

Our scheduled release i still weeks away, which I believe would be a major show stopper for Vue / Vite developers. We'll make a release of the themes this week and I will notify you here.

[Tony]

Thank you!

[Ivan Zhekov]

Here is the PR: https://github.com/telerik/kendo-themes/pull/4256

We'll merge it and release a new version of the themes.

[Ivan Zhekov]

v6.1.0 released!

Regards,
Ivan Zhekov
Progress Telerik

[Tony]

That's great news! Thanks!

[SysCo]

Great, it's working. Thank you !

[Ivan Zhekov]

Hello, Fabien.

The issue is related to vite trying to be too helpful -- originally, there is a valid function call at that place in the code:

However, vite reading trough the file, decides that it's an URL and decides to provide relative path to node modules. Hence, making the function signature invalid.

If we use interpolation, and that's just speculation, perhaps vite's heuristics will recognize it as something else and could wait for the css to be produced and then provide the paths.

I am attaching the same file, but will interpolation. Can you verify that it works correctly on your end?

Update:

we'll have a theme released because it's a critical problem for vue / vite developers.

[SysCo]

Awesome ! Thank you !