Error typescript CSS

[tnascimento]

After I upgraded to version of arcgis/core to 4.28.10 I started receiving a compilation error related to some grayscale function missing $color

^^^^^^^^^^^ invocation
╵
┌──> sass:color
1 │ @function grayscale($color) {
│ ━━━━━━━━━━━━━━━━━ declaration
╵
node_modules/@arcgis/core/assets/esri/themes/dark/main.css 1:496278 root stylesheet

webpack compiled with 1 error

I'm importing the dark theme in my react component as 

@import "@arcgis/core/assets/esri/themes/dark/main.css";

Anyone knows how this could be fixed?

[ReneRubalcava]

Do you have a basic report project on GitHub to look at? Importing the css file shouldn't invoke the sass files, so it suggests something else in your build is referencing them.

[tnascimento]

I don't have a public repo for this project. I checked and is using default CRAS without any transformation or building steps for sass. 

The only thing is when adding the @import "@arcgis/core/assets/esri/themes/dark/main.css"; in a scss file it brokes the build, but if I remove it built but without the styles needed.

[tnascimento]

After some more digging, in the class 'esri-elevation-profile-legend-item--disabled',  there's a missing parameter in

filter: grayscale()

[ReneRubalcava · Accepted solution]

Empty is just treated like 100%. Are you importing with the .css extension in your sass file? I would import the css in your JavaScript file rather than the sass file so it doesn't try to process it.