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!


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)

Leave a Reply

Your email address will not be published. Required fields are marked *