AngularDartのコンポーネントでSassを使う

AngularDartのチュートリアルでは、cssしか書かなかったのですが、普段はSass(scss)で書いているので、こちらもそう書けるように設定しようとしました。

ライブラリの選定

DartでのSassのライブラリは、

• dart_sass_transformer
• sass_builder

の2つがメジャーっぽいんですが、githubのリポジトリの更新頻度をみると、現時点(2017-11-16)ではsass_builderのほうがメンテナンスされているみたいなので、sass_builderを採用しました。

インストール

pubspec.yamlの更新

pubspec.yamlのdev_dependenciesにsass_builderを追加します。そして、transformerの先頭にsass_builderを追加します。

dev_dependencies:
  # 省略…
  sass_builder: ^1.0.0

transformer:
- sass_builder
- angular:
    entry_points:
    - web/js/main.dart
- dart_to_js_script_rewriter

強調するように、先頭に！と書きましたが、transformerは順番通りに処理が行われるようなので、dartファイルが解釈される前にscssファイルをcssファイルに変換しておかないと、ファイルが存在せずにエラーになります。自分はこれで数十分悩んでしまいました…。

app_component.dartで指定する

AngularDart側では、styleUrlsには、拡張子cssで指定します。コンパイル後のファイルが参照されるからです。

import 'package:angular/angular.dart';

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  template: '''
    <h1>{{title}}</h1>
  ''',
)
class AppComponent {
  final title = 'Tour of Heroes';
}

そして、app_component.scssを作ります。試しに色と文字の大きさを変えてみました。

h1 {
  color: red;
  font-size: 11px;
}

そして、pub serveでサーバを起動して、アクセスしてみます。

結果

before

after

ちゃんと変わりました！

編集後記

transformerの順番には注意しましょう！普通に考えたらそりゃそうだろう、と思うのですが、当初はなんとなく追記してしまっていました…。とにかく、これでscssを書けるようになったのでよかったです。