CODEWITHSUNDEEP
sasskendo-uitelerikdart-sass
Raptor
Raptor

Reputation: 442

Custom build of Telerik Kendo Themes

I'm trying to update version of Kendo Themes in my FE project. I'm building all CSS files on my side, because it is compilation of Bootstrap, Kendo and other parts.

I uninstalled node-sass and migrating to dart sass.

But I'm not able to migrate Kendo part.

I have scss_index.scss

// Kendo
@import "kendo/_index.scss";

// Bootstrap 5
@import "bootstrap/_index.scss";

// other imports

I tried to migrate kendo/_index.scss to new version as described in Telerik page https://www.telerik.com/design-system/docs/themes/release-notes/breaking-changes/v10-0-0/#importing-the-theme

@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.

But calling build ends with error

npm run sass:build-dev

> [email protected] sass:build-dev
> sass-build -c sass.config-dev.js

info build scss\themes\default.scss => dist\content\themes\default\styles3.css
P:\Repos\design-fe-zeteo-2022\node_modules\node-sass\lib\index.js:440
  throw Object.assign(new Error(), JSON.parse(result.error));
  ^

Error: no mixin named core-styles
    at module.exports.renderSync (P:\Repos\design-fe-zeteo-2022\node_modules\node-sass\lib\index.js:440:23)
    at LegacySassCompiler.compile (P:\Repos\design-fe-zeteo-2022\node_modules\sass-build\dist\compiler\legacy-sass-compiler.js:64:34)
    at LegacySassCompiler.build (P:\Repos\design-fe-zeteo-2022\node_modules\sass-build\dist\compiler\base-sass-compiler.js:62:25)
    at sassBuild (P:\Repos\design-fe-zeteo-2022\node_modules\sass-build\dist\build\build.js:26:12)
    at P:\Repos\design-fe-zeteo-2022\node_modules\sass-build\dist\config\stage-build.js:64:34
    at Array.forEach (<anonymous>)
    at stageBuild (P:\Repos\design-fe-zeteo-2022\node_modules\sass-build\dist\config\stage-build.js:45:16)
    at P:\Repos\design-fe-zeteo-2022\node_modules\sass-build\dist\config\process-config.js:102:7
    at Array.forEach (<anonymous>)
    at processConfig (P:\Repos\design-fe-zeteo-2022\node_modules\sass-build\dist\config\process-config.js:97:10) {
  status: 1,
  file: 'P:/Repos/design-fe-zeteo-2022/scss/kendo/_index.scss',
  line: 14,
  column: 10,
  formatted: 'Error: no mixin named core-styles\n' +
    '        on line 14 of scss/kendo/_index.scss\n' +
    '        from line 4 of scss/_index.scss\n' +
    '        from line 7 of scss/themes/default.scss\n' +
    '>> @include core-styles();\r\n' +
    '   ---------^\n'
}

Node.js v18.20.5

I have no idea how to fix it, because those mixins are part of telerik packages in node_modules.

So what is wrong? I'm new to this Dart Sass syntax with use/forward etc. I think I know how use works, abut how to get my build work?

Anyone knows?

Upvotes: 0

Views: 48

Answers (0)

Related Questions