Dartで使うパッケージ管理ツールのPubからDart Sassのコンパイル環境を作成する
普段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.cssSassはフロントエンド開発でよく扱われていますが、コンパイル環境についてはNode.js環境で構築したり、各種ビルドツールやフレームワークなどに組み込まれていることが多いかと思います。DartのAPIを使った方法はあまり見かけませんが、設定ファイルさえ作成してしまうと同じように扱えますし、コマンド1つで必要なライブラリも揃って簡単に環境構築も用意できますので、合わせて覚えておくと便利ですね。
sponserd
keyword search
recent posts
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
- ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
- ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
- ViteでPostCSS周りの設定やSassを使う
ViteでPostCSS周りの設定やSassを使う
- フロントエンドの開発環境にVite + TypeScriptを導入する
フロントエンドの開発環境にVite + TypeScriptを導入する
categories