Closed Robouste closed 1 year ago
Any update on this ? Using Material Theme is a requirement to our project
I've looked a bit into the variables.scss, and it looks like either the theme is not loaded correctly, either there is an error in the way to retrieve certain values.
The error occurs because this line (48) returns nothing:
$elevation: map-get( $theme, elevation ) !default;
When I print the $theme, I can see there is not direct property called "elevation". So If I switch to:
$foreground: map-get($theme, foreground);
$elevation: map-get( $foreground, elevation ) !default;
There is no more error at the line 48 but an other one further at this line:
$grouping-header-text: rgba($base-text, .54) !default;
It crashes because the $base-text comes from this value:
$component-text: map-get($theme, component-text) !default;
But when I print out $theme, I don't even see a property "component-text".
So, I guess the $theme
variable does not contain what it should, or the scss code simply doesn't work.
I had the same problem. It seems to be caused by non
values in the true-mix
function. In my case, $button-border
was none. After I initialized the value with a color before import, the error disappears.
I recently updated, and close, another similar issue -- #1557. In a way the are related and on a conceptual level are in fact, duplicates.
I've gone into detail in that issue what the main culprit is, but in short its variable ownership and expectations. In this particular case, we are expecting $theme
to be a map and not any map, but a very specific one.
Can we change the name of the variable in question to be something else? Absolutely! Can we guarantee that someone will not come with the same name? Not at all!
The problem can be truly solved in two ways: rename all variables to $kendo-
for node-sass and use sass modules for dart-sass.
Describe the bug When importing material grid file, the application doesn't compile
To Reproduce Simply import the grid theme scss file into your main scss file
@import "~@progress/kendo-theme-material/scss/grid";
Screenshots
Browser
Additional context