1

I have a shared library that contains many SCSS variables, for example colors such as $gray-300: hsl(0, 0%, 91%). This shared library is imported into styles.scss eg

@import "~node_modules/@my-company/shared-ui/styles/styles";

I could get to the variable by also importing this into the component style sheet, but when I built I got the "budget exceeded" error. I am glad I got this warning as I did not realize it would duplicate everything in the shared styles.

Next, in styles.scss I thought I could just reshared/expose this in :root this, so I tried the following...

:root{
  --myapp-background-color: $gray-300  
}

However the $gray-300 was not resolved.

My question is why the above did not work, and/or is there a way to do the above without changing the actual imported library?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
peterc
  • 6,921
  • 9
  • 65
  • 131
  • 1
    Does this answer help you? https://stackoverflow.com/questions/52603815/css-root-variables-and-sass-functions. Also you can escape the scss var when you use it in CSS: https://sass-lang.com/documentation/breaking-changes/css-vars – Nathaniel Flick Oct 03 '22 at 02:38
  • Great thankyou! Yes `:root{ --myapp-background-color: #{$gray-300} }` does exactly what I am after – peterc Oct 03 '22 at 07:31

0 Answers0