Using SASS in Angular Dart

Issue

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

My app structure so far looks like this:

-lib
    -src
        -signin_component
            -signin_component.dart
            -singin_component.html
            -signin_component.scss
            -signin_component.scss.css
        -route_paths.dart
        -routes.dart
    -app_component.css
    -app_component.dart
    -app_component.html

The pubspec.yaml file contains the following:

environment:
  sdk: '>=2.0.0 <3.0.0'

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

dev_dependencies:
  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';

@Component(
  selector: 'app-signin',
  templateUrl: 'signin_component.html',
  styleUrls: const [
      'signin_component.scss.css',
      'package:angular_components/app_layout/layout.scss.css'
  ],
  directives: [
    MaterialIconComponent
  ]  
)

class SigninComponent{

}

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

• Use SCSS style files within AngularDart 5 and Dart 2
• Angular Dart – Using sass files
• Is Dart integrated with SASS?
• Importing SCSS partials in Angular Dart

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.

Solution

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 [
      'signin_component.css',
      'package:angular_components/app_layout/layout.scss.css'
  ],

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)