Custom build of Telerik Kendo Themes

[René]

Hello,

tried to ask for help in Stack Overflow, but can't get any help.

https://stackoverflow.com/questions/79315903/custom-build-of-telerik-kendo-themes

 

[Zhuliyan]

Hello René,

I have read the provided StackOverflow thread, and based on the context and code examples, I can offer some suggestions to resolve your problem. For these suggestions, I am referring to the code snippet you provided:

@import "_variable-overrides.scss";

// --------------------------------------
// Selective build
// --------------------------------------

@use '@progress/kendo-theme-default/scss/index.scss' as *;

// Core
@include core-styles();

// Typography
@include kendo-typography--styles();

// Generic content
@include kendo-icon--styles();
@include kendo-messagebox--styles();

// Indicators
@include kendo-tooltip--styles();

// etc.

* If you have switched to dart-sass in your project, I recommend avoiding @import annotations in your codebase. Instead, replace all imports with @use and @forward annotations.

* In case you want to override some theme variables, use the new dart-sass method of overriding and configuring them by using with(). Here is a link to the Sass documentation. In your specific case, it should look like this:

@use '@progress/kendo-theme-default/scss/index.scss' as * with (
    //example
    $kendo-tooltip-padding-y: 20px
);
...

* You don't need to include the "@include core-styles();" mixin in the code you provided. This is unnecessary because those styles are already included with your component mixins. Removing the core-styles() mixin will also fix your build failure.

I hope the provided information resolves your problem.

Regards,
Zhuliyan
Progress Telerik

[René]

Well this is not what doesn't work for me. Let's try this simple scenario.

I have my root scss for building themes:

default.scss

// Import frameworku
@use "../_index.scss";

then there is main scss file with whole "framework":

_index.scss

// Kendo
@use"kendo/_index.scss";
// etc.
 

and then kendo main file for custom build:

kendo/_index.scss

// Import the entire theme
@use '../../node_modules/@progress/kendo-theme-bootstrap/scss/index.scss' as *;

// Indicators
@include kendo-tooltip--styles();

// Native forms
@include kendo-textbox--styles();
@include kendo-textarea--styles();
@include kendo-checkbox--styles();
@include kendo-radio--styles();

// etc.

then trying to compile just this one file and getting errors

> sass scss/themes/default.scss dist/themes/default/styles3.css

Error: Can't find stylesheet to import.
   ╷
19 │ ┌ @forward "@progress/kendo-theme-core/scss/index.scss" with (
20 │ │     // Color System Switch
21 │ │     $kendo-enable-color-system: $kendo-enable-color-system !default,
22 │ │     // Color System
23 │ │     $_default-colors: $kendo-colors,
24 │ │     $kendo-colors: $kendo-colors !default,
25 │ │     // Elevation
26 │ │     $_default-elevation: $kendo-elevation,
27 │ │     $kendo-elevation: $kendo-elevation !default,
28 │ │     // Typography
29 │ │     $_default-font-sizes: $kendo-font-sizes,
30 │ │     $kendo-font-sizes: $kendo-font-sizes !default,
31 │ │     $kendo-font-size: $kendo-font-size !default,
32 │ │ 
33 │ │     $_default-line-heights: $kendo-line-heights,
34 │ │     $kendo-line-heights: $kendo-line-heights !default,
35 │ │     $kendo-line-height: $kendo-line-height !default,
36 │ │
37 │ │     $_default-font-families: $kendo-font-families,
38 │ │     $kendo-font-families: $kendo-font-families !default,
39 │ │     $kendo-font-family: $kendo-font-family !default,
40 │ │
41 │ │     $_default-font-weights: $kendo-font-weights,
42 │ │     $kendo-font-weights: $kendo-font-weights !default,
43 │ │     // Border Radii
44 │ │     $_default-border-radii: $kendo-border-radii,
45 │ │     $kendo-border-radii: $kendo-border-radii !default,
46 │ │     // Spacing
47 │ │     $_default-spacing: $kendo-spacing,
48 │ │     $kendo-spacing: $kendo-spacing !default,
49 │ │ );
   │ └─^
   ╵
  node_modules\@progress\kendo-theme-bootstrap\scss\core\_index.scss 19:1  @forward
  node_modules\@progress\kendo-theme-bootstrap\scss\index.scss 3:1         @use
  scss\kendo\_index.scss 11:1                                              @use
  scss\_index.scss 2:1                                                     @use
  scss\themes\default.scss 7:1                                             root stylesheet

Process finished with exit code 65

So I still have no idea how to use npm kendo package to create custom build as part of our framework (custom styles, Bootstrap, Kendo, ...). 

 

[Zhuliyan]

Hi René,

It seems that the issue is related to the build tools you are using to compile the kendo-themes, as they are unable to locate your `node_modules` folder, which is where the missing stylesheet is located.

If you are using Sass, you can try compiling your main file with load-path to the `node_modules` directory with the following example CLI command:

sass --load-path=node_modules fileName.scss fileName.css

Here is the official Sass documentation about setting load-path. - https://sass-lang.com/documentation/cli/dart-sass/#load-path
Utilizing it should resolve this compile error.

Regards,
Zhuliyan
Progress Telerik