Scss material file for ejs-grid not working

Question

Hi, i'm updating the angular packages of our dependencies to the latest (from version 19.3 to 20.1) and importing the scss file (we use sass to in angular) for the ejs-angular-grid give me this error

SassError: Undefined function.

106 │ $pager-bigger-messagebar-padding-right: math.div($pager-messagebar-padding-right, .75) !default;

│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

╵

node_modules\@syncfusion\ej2-grids\styles\pager\_material-definition.scss 106:41 @import

node_modules\@syncfusion\ej2-grids\styles\pager\material.scss 2:9 @import

node_modules\@syncfusion\ej2-angular-grids\styles\pager\material.scss 1:9 @import

node_modules\@syncfusion\ej2-angular-grids\styles\material.scss 1:9 @import

src\assets\scss\_syncfusion.scss 69:9 @import

This is our dependecies:

"@syncfusion/ej2-angular-base": "20.1.55",
"@syncfusion/ej2-angular-buttons": "20.1.55",
"@syncfusion/ej2-angular-calendars": "20.1.56",
"@syncfusion/ej2-angular-charts": "20.1.55",
"@syncfusion/ej2-angular-dropdowns": "20.1.56",
"@syncfusion/ej2-angular-gantt": "20.1.56",
"@syncfusion/ej2-angular-grids": "20.1.56",
"@syncfusion/ej2-angular-inputs": "20.1.55",
"@syncfusion/ej2-angular-layouts": "20.1.55",
"@syncfusion/ej2-angular-navigations": "20.1.56",
"@syncfusion/ej2-angular-notifications": "20.1.55",
"@syncfusion/ej2-angular-popups": "20.1.55",
"@syncfusion/ej2-angular-progressbar": "20.1.55",
"@syncfusion/ej2-angular-splitbuttons": "20.1.55",
"@syncfusion/ej2-angular-treegrid": "20.1.56",
"@syncfusion/ej2-base": "20.1.56",
"@syncfusion/ej2-data": "20.1.55",
"@syncfusion/ej2-svg-base": "20.1.55",

If I change the impor to the fabric style works correctly. or if a return to version 19.3 i

What could

Cesar Smerling · Answer

Here is a clean angular project that fails on running.Note: If I downgrade to 20.1.47 of the grid package it works.Attachment: gridtestscss_8504ebc0.7z

Rajapandi Ravi · Answer

Hi Cesar,Greetings from Syncfusion supportCurrently we are validating your query with concern team,
and we will update you the details on or before 24th May 2022. Until
then we appreciate your patience.Regards,Rajapandi R

Rajapandi Ravi · Answer

Hi Cesar,Sorry for the
inconvenience.We have forwarded this query to the concerned team and
currently, they are working on this query with high priority and need some more
time to validate this scenario. So, we
will update more details on or before May 26th, 2022. Until then we appreciate your patience.Regards,Rajapandi R

Gokulraj Varatharajan · Answer

Hi Cesar,Sorry for the inconvenience caused,We have recently migrated scss compile from node-sass to the
latest sass support, due to the latest sass breaking changes. Also, node-sass
will be deprecated in future versions.

https://sass-lang.com/documentation/breaking-changes/slash-div

https://ej2.syncfusion.com/angular/documentation/release-notes/20.1.55/?type=all#common

In the sass package, math functions are introduced in version 1.32.0, but below
angular 12 cli dependencies are used below version (1.32.0) of sass. So
that you are facing a compilation issue. We have suggested a temporary solution
to resolve the issue.Solution:

1), Remove package-lock.json and sass packages in node_modules2), Then Install sass package with version ^1.32.0 ‘npm
install sass@^1.32.0 ’
3), Add the test.js file root of the application4), Add the below code in test.js

var
  rimraf = require("rimraf");
  var dir
  = 'node_modules/@angular-devkit/build-angular/node_modules/sass';
  rimraf(dir,
  function () { console.log("done"); });

5), run commands like, node test.js
6), Then serve the application, and the issue will resolve.

Please get back to us if you have any queries.Regards,Gokul

Ricardo Salas · Answer

Hi,I'm in the process of updating to the latest version (I was on version 19.1.X), and encountered this same issue. The provided solution did work for me, but I would like to know if there is already a permanent fix for this? Or is this still the only solution available?Thanks

Ricardo Salas · Answer

Can I get an answer, please?

Ragunath Sukumaran · Answer

Hi Cesar,We have found that this is a issue with the
scss and this issue has been resolved in the scss version 1.33.0, but angular
11 is using the scss version 1.32.0 as its dependency. We tried to change the
version of the scss but it is installing only in the version 1.32.0. So, we
suggest you to use the angular 12, because in angular 12, they are using the
scss version above 1.33.0. We have prepared a sample in the angular 12 and the
issue is resolved, please refer to the below sample.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular12-313375582Please get back to us if you have any queries.
Regards,
Ragunath S