Telerik Forums
Kendo UI for Vue Forum
2 questions
Sort by
2 answers
748 views

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

Ivan Zhekov
Telerik team
 answered on 03 Feb 2023
1 answer
4.9K+ views

Hi,

I am using Kendo UI Material theme. I would like to switch between light and dark themes without reloading the whole site. May I know what are variables available that I can set in the code?

garri
Top achievements
Rank 2
Iron
Iron
Iron
 updated answer on 10 Aug 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DatePicker
DropDownTree wrapper
Spreadsheet wrapper
Scheduler
Editor
Editor wrapper
Input
DateInput
MultiSelect
NumericTextBox
Scheduler wrapper
Calendar
DataSource wrappers (package)
Styling / Themes
DateTimePicker
Gantt wrapper
Localization
Pager
Chart
Checkbox
Upload
Chart wrappers (package)
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Slider
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
Menu
TreeList
Toolbar
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?