topic Re: Error typescript CSS in ArcGIS JavaScript Maps SDK Questions

Error typescript CSS

tnascimento — Thu, 22 Feb 2024 14:29:14 GMT

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?

Re: Error typescript CSS

ReneRubalcava — Thu, 22 Feb 2024 14:57:05 GMT

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.

Re: Error typescript CSS

tnascimento — Mon, 26 Feb 2024 13:19:56 GMT

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.

Re: Error typescript CSS

tnascimento — Mon, 26 Feb 2024 15:32:27 GMT

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

filter: grayscale()

Re: Error typescript CSS

ReneRubalcava — Mon, 26 Feb 2024 17:06:36 GMT

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.