Using SASS in Angular Dart


I am trying to figure out how to use .scss files in my AngularDart project.

My app structure so far looks like this:


The pubspec.yaml file contains the following:

  sdk: '>=2.0.0 <3.0.0'

  angular: ^5.0.0
  angular_components: ^0.12.0
  angular_forms: ^2.0.0
  angular_router: ^2.0.0-alpha+19 
  bootstrap_sass: any

  angular_test: ^2.0.0
  build_runner: ^1.0.0
  build_test: ^0.10.2
  build_web_compilers: ^0.4.0
  test: ^1.0.0

I’m trying to add style to the singin_component.html file but nothing I’ve done is working. The singin_component.dart file has the following:

import 'package:angular/angular.dart';
import 'package:angular_components/material_icon/material_icon.dart';

  selector: 'app-signin',
  templateUrl: 'signin_component.html',
  styleUrls: const [
  directives: [

class SigninComponent{


I’ve read several post about this on stackoverflow. Some references are:

I have tried almost everything recommended on the posts above but still, nothing works. At this point, I’d rather ask if someone here can guide me. I have little experience with dart. I’m learning AngularDart and I feel I’m missing something that I just can’t see.


If you add sass_builder: ^2.1.2 to the dev_dependencies in your project it will run during the build and create a .css file for any .scss file you have.

I’d recommend removing signin_component.scss.css from your source directory. signin_component.css (notice the extension) will be generated during the build.

Update your angular component to include the generated .css file:

styleUrls: const [

The file you import from the angular_components package still needs to end with .scss.css because we generate a custom extension for our package.

Answered By – nshahan

Answer Checked By – Mildred Charles (FlutterFixes Admin)

Leave a Reply

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