This is a migrated thread and some comments may be shown as answers.

Using the Build Process of the Themes won't build

3 Answers 51 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 30 Oct 2019, 09:52 PM

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.

3 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 01 Nov 2019, 02:02 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Brian
Top achievements
Rank 1
answered on 01 Nov 2019, 04:41 PM

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?

0
Preslav
Telerik team
answered on 04 Nov 2019, 02:16 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Brian
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Brian
Top achievements
Rank 1
Share this question
or