Use SCSS style files within AngularDart 5 and Dart 2

  1. Add a dev dependency to your pubspec.yaml for sass_builder: ^2.0.0.
  2. Run pub get to download the new dependencies.
  3. Create a sass file ex: lib/app_component.scss and add some styles to it.
  4. Add a the compiled css stylesheet to your the @Component annotation in lib/app_component.dart: styleUrls: const ['app_component.css'],

The css file will be generated by sass_builder during the build process.


If you are using angluar_components. One could simply turn it on:

  1. Create a build.yaml file with the following content :

    targets:
      $default:
        builders:
          angular_components|scss_builder:
            enabled: True
    
  2. Use the following convention for the styleUrl annotations: styleUrls: const ['app_component.scss.css']
  3. Write your sass in the *.scss files.