Search code examples
sassangular-dart

Best way to store and use SCSS global variables for a AngularDart 5

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.