Dartで使うパッケージ管理ツールのPubからDart Sassのコンパイル環境を作成する

Dart2022.4.15

普段Sassを使う場合にはwebpackなどNode.jsを使った環境で、あるいは直接コマンドラインでコンパイルを行うことが多いかと思いますが、Dartで使われるパッケージ管理ツールのPubからSassのパッケージに用意されているAPIを使ってコンパイルを行う方法もあります。Flutterのフレームワークを使う時などは参考になることもあるかと思いますので、備忘録として残しておきます。（過去参考記事） Ruby SassからDart SassへSassの環境を移行させるまでの流れ Sassにはいくつか種類がありますが、現在はDartというプログラミング言語で作られた「Dart Sass」の使用が推奨されています。そしてPubというのはDartで使われるパッケージ管理ツールで、Node.jsでいうところのnpmのようなものになります。Dart SassはこのPubにもパッケージとして存在し、APIもいくつか用意されておりそこからコンパイルすることもできます。【Pub.dev】 https://pub.dev/ PubでパッケージをインストールするためにDartのCLIツールが必要になりますので、下記コマンドで「Dart SDK」というものをインストールしていきます。

$ brew tap dart-lang/dart

$ dart --version
Dart SDK version: 2.16.2 (stable) (Tue Mar 22 13:15:13 2022 +0100) on "macos_x64"

これでdartコマンドが使えるようになります。続いてパッケージ管理用の設定ファイルである「pubspec.yaml」を作成します。Node.jsでいうところのpackage.jsonのようなものになります。

$ touch pubspec.yaml

今回はDart Sassのコンパイル環境の構築に必要なパッケージをインストールしていきます。pubspec.yamlには下記のように記述していきます。【pubspec.yaml】

name: 'dart-sass'
environment:
  sdk: '>=2.10.0 <3.0.0'
dev_dependencies:
  sass: '^1.50.0'
  source_maps: '^0.10.10'

pubspec.yamlが用意できたら下記のコマンドで必要なパッケージをインストールしていきます。

$ dart pub get

そうすると、同階層に下記のようなパッケージ及び関連ファイル一式がインストールされているのが確認できます。

┣ pubspec.yaml
......
┣ .dart_tool
  ┗ package_config.json
┣ .packages
┗ pubspec.lock

続けてSassのコンパイル処理を記述したファイルを作成していきます。dartコマンドでこのファイルをソースとして実行することでコンパイルが行われる仕組みになります。ファイル名は任意のものでOKです。

$ touch compile.dart

作成したコンパイル処理用のファイルに下記のように処理を記述していきます。Dart本体に関連するライブラリとSassのパッケージ、またソースマップ生成用などのパッケージを読み込んでいきます。【compile.dart】

import 'dart:io';
import 'dart:convert';
import 'package:sass/sass.dart' as sass;
import 'package:source_maps/source_maps.dart';

void main(List<String> arguments) {
  var outputStyle = sass.OutputStyle.compressed;
  var result = sass.compileToResult(arguments[0], style: outputStyle, sourceMap: true, charset: false);
  new File(arguments[1]).writeAsStringSync(result.css + '/*# sourceMappingURL=' + arguments[1] + '.map */');
  new File(arguments[1] + '.map').writeAsStringSync(json.encode(result.sourceMap));
}

続けて、Dartでコンパイルの処理を作成していきます。今回の処理では引数に対象のソースファイルを出力先のファイルを指定できるようにするため、コマンドライン上で入力された引数を受け取るようにしています。そしてその引数をもとに、コンパイル処理やコンパイル後のCSSファイルを生成する処理を記述していきます。コンパイルに関してはいろんなAPIやClassが用意されており、公式のドキュメントが参考になりますが、それ以外は他のものと比べ情報量がまだ少ない印象があります。【sass library - Dart API - 】 https://pub.dev/documentation/sass/latest/sass/sass-library.html compileToResult()メソッドを実行することで、コンパイル処理の際にコンパイル後のCSS文字列や、マッピングファイルの内容、などのオブジェクトが返されるので、それらを利用してコンパイル環境を整えていきます。また今回はマッピングファイルも作成されるようにしますが、最終的にJSONの形になるようにしておきます。これでコンパイル環境の準備が整いました。あとはdartコマンドで上記のファイルと、コンパイル対象と生成後のファイルを指定して実行すると、SassファイルがコンパイルされCSSファイルが生成されるようになります。

$ dart compile.dart main.scss main.min.css

Sassはフロントエンド開発でよく扱われていますが、コンパイル環境についてはNode.js環境で構築したり、各種ビルドツールやフレームワークなどに組み込まれていることが多いかと思います。DartのAPIを使った方法はあまり見かけませんが、設定ファイルさえ作成してしまうと同じように扱えますし、コマンド1つで必要なライブラリも揃って簡単に環境構築も用意できますので、合わせて覚えておくと便利ですね。