Using the Build Process of the Themes won't build

[Brian]

I followed the "Using the Build Process of the Themes" steps here https://www.telerik.com/kendo-vue-ui/components/styling/#toc-using-precompiled-css and I only want the necessary files for a specific component.

 

command "npm run build" gives this error:

$ npm run build
npm ERR! missing script: build

npm ERR! A complete log of this run can be found in:
npm ERR!     /.npm/_logs/2019-10-30T18_09_36_109Z-debug.log

I can run "npm run sass" and compile the all.css file into the dist folder. But I want custom.css like it instructs.

[Preslav]

Hi Brian,

Recently we changed our build infrastructure of the themes. However, the docs are outdated. I will make sure that we update the docs as soon as possible.

At this stage, to create a custom CSS file, I would suggest following these steps:

1. In the "scss" folder of the theme that you are using, for example - the Default theme, add a file that would be used for the custom CSS compilation.
2. The file could look like:

@import "panelbar.scss";
@import "grid.scss";

3. In a terminal, navigate to the theme folder and execute the following command (replace "NameOfTheCustomFile" with the name of the created file) -

gulp sass --file "scss/NameOfTheCustomFile.scss"

4. Use the generated CSS file from the "dist" folder.

Please, give this a try, and let me know if it works for you.

 

Regards,
Preslav
Progress Telerik

[Brian]

This seems to work. The only thing is say I only want the gantt css, if I include gantt.scss only the gantt chart looks pretty good but its missing css. Like the day/week/month toggle top right lost its styling. If I click a task to edit, that modal content lost its styling, such as the form fields, calendar selector, etc.

What scss files are necessary to make all aspects of the gantt complete?

[Preslav]

Hello Brian,

At this stage, to achieve the desired outcome, modify the "gantt.scss" file  to:

@import "_variables.scss";
@import "_mixins.scss";


// Dependencies
@import "common/_all.scss";
@import "treelist.scss";
@import "input.scss";
@import "datetime.scss";
@import "numerictextbox.scss";
@import "validator.scss";
@import "scheduler.scss";
@import "splitter.scss";
@import "window.scss";
@import "button.scss";


// Component
@import "gantt/_layout.scss";
@import "gantt/_theme.scss";

 

On a side note, I already started updating the SCSS files, so all the necessary dependencies are included. You could follow my progress here - https://github.com/telerik/kendo-themes/issues/261

 

Regards,
Preslav
Progress Telerik