Use SCSS style files within AngularDart 5 and Dart 2

Question

I’m working with Dart 2 and AngularDart 5.

⚠ I searched online about my question, but I didn’t find a satisfactory answer.

❔ Can somebody explain all the steps I need to include and to work with SCSS style files within my AngularDart application?

I started with quickstart application that you can find here.

Thank you!

score 18 · Accepted Answer · answered May 31 '18 at 20:02

18

Add a dev dependency to your pubspec.yaml for sass_builder: ^2.0.0.
Run pub get to download the new dependencies.
Create a sass file ex: lib/app_component.scss and add some styles to it.
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.

answered May 31 '18 at 20:02

nshahan

Serverplumber · Answer 2 · 2019-02-14T19:00:37.003

6

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

Create a build.yaml file with the following content :

targets:
  $default:
    builders:
      angular_components|scss_builder:
        enabled: True

Use the following convention for the styleUrl annotations: styleUrls: const ['app_component.scss.css']
Write your sass in the *.scss files.

edited Feb 14 '19 at 19:00

answered Oct 15 '18 at 16:14

Serverplumber

4

Technically sass_builder isn't included in the build tool. It is a dependency of angular_components. This technique does work, but you are relying on the sass_builder package as a transitive dependency through the angular_components package. If you stop using angular_components or never were to begin with then this will not work. – nshahan Feb 13 '19 at 17:32

score 1 · Answer 3 · edited May 30 '20 at 16:46

With newest versions:

Surprise: In styleUrls are in a different CSS filename (not with the .scss.css extension, just .css; e.g. app_component.css, but the styles are in app_component.scss).
Surprise: In app_component.scss, import without lib in the path:

@import 'package:angular_components/app_layout/mixins';

pub run build_runner serve --verbose

3 Answers3