Error typescript CSS

195
4
Jump to solution
02-22-2024 06:29 AM
tnascimento
New Contributor

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?
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

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.

View solution in original post

0 Kudos
4 Replies
ReneRubalcava
Frequent Contributor

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.

0 Kudos
tnascimento
New Contributor

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.

0 Kudos
tnascimento
New Contributor

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

filter: grayscale()
 
 
0 Kudos
ReneRubalcava
Frequent Contributor

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.

0 Kudos