Issue
I’m using AngularDart 5 in order to create a web app. I want to store some SCSS variables in my styles.scss file (web folder). What is the best way to use these variables in the SCSS stylesheet of a component (lib folder)?
Thank you!
Solution
There are a couple of concepts I need to clear up first:
- Scss variables are only available at compile time. Once the file is compiled to CSS they are not available at runtime.
- Dart has a convention where only files in the lib/ directory can be imported to other places in the app. I believe that dart-sass enforces this convention, and you won’t be able to import the file from web.
So your options are:
- Move the styles.scss file to the lib directory so that it can be
imported. Convention is to have it start with an underscore which
signals it is just for imports. - Use CSS Variables which can be used
at runtime.
Answered By – Ted Sander
Answer Checked By – Katrina (FlutterFixes Volunteer)