0

I'll get down straight to the idea:

I want my lib's components to not have specific colors. So I style my component in the following way:

h1 {
  color: $primary;
}

Note that I do not declare $primary variable anywhere in the lib.

I do this in my app's folder (style.scss):

$primary: red

Obviously, it doesn't work, since I have to import this variable into my lib's component styles. But the library should not depend on the application.

So, the question:

Is it even possible to provide variables to libs from apps? If so, how?

Boris
  • 4,944
  • 7
  • 36
  • 69

1 Answers1

0

Well, I don't know how to achieve this using SCSS variables, but with CSS I do:

Lib's component styles:

h1 {
  color: var(--primary);
}

App's styles:

:root {
  --primary: red;
}
Boris
  • 4,944
  • 7
  • 36
  • 69
  • Does this not violate boundaries though? Lib is aware of app styles? Supposing you have two apps and app #1 has CSS vars but app #2 does not and lib attempts to use these vars. – kylestephens May 24 '21 at 15:34