npm-scriptsでDart Sassをコンパイルする
- Web
- 2021/07/24
コマンドラインでDart Sassをコンパイルする環境を構築したので備忘録です
2021/10/17 : この記事のやり方ではうまく動かないので以下を新しく記事を書きました
Dart Sass はじめました
node-sassが非推奨になったとのことなので、sassのコンパイルをDart Sassに乗り換えました。
グローバルスコープの@import文が廃止になり(CSSのimportをサポートするため)、ファイルスコープの@use文が登場するなど手直しが必要でしたが、以前と殆ど変わらない環境を構築することができました。
SassのコンパイルにはGulpやWebpackなどの方法がありますが、今回はNode.jsのnpm-scriptsを使用した方法を紹介します。
パッケージ一式をインストールする
必要なパッケージ
今回はコンパイル時に自動でベンダープレフィックスを付与したいので、autoprefixerとCSSパーサーであるpostcss(とコマンドラインツールのpoctcss-cli)も一緒にインストールします。
- sass
- autoprefixer
- postcss
- postcss-cli
npm install sass autoprefixer postcss postcss-cli --save-dev
スクリプトの設定
作業フォルダのルートでnpm initし、package.jsonを作成します。今回は『dart_sass_compiler』というプロジェクト名で作成します。
package.jsonのscripts欄に、以下のようなscriptを追加します。
"scripts": {
"watch": "sass --watch scss:css --style expanded | postcss --use autoprefixer -b 'last 2 versions ie >= 11 Android >= 7 last 3 iOS major versions' css/style.css -o css/style.css"
}
watchオプションを使用してscssフォルダを監視し、変更があればcssフォルダにexpanded形式で出力します。その際postcssを使用してautoprefixerでベンダープレフィックスを付与したCSSを作成し同名のファイルとして保存する。という内容です。watchオプションを使用する場合はフォルダの指定のみで動きますが、都度コンパイルする場合は
scss/style.scss:css/style.css
のようにファイルの指定が必要なようです。
また、autoprefixerを使用するためpostcssにファイル名を渡す必要があるのですが、上記scriptではCSSのファイル名をstyle.cssに固定しています。対象のファイルが存在しないとエラーになるのでここは都度書き換えてください。
コンパイル
ターミナルでプロジェクトのルートフォルダに移動し以下のように入力するとフォルダの自動監視が始まります。
npm run watch
自動監視中のターミナルは通常時以下のようになっています
Dir > npm run watch
> [email protected] watch
> sass --watch scss:css --style expanded | postcss --use autoprefixer -b 'last 2 versions ie >= 11 Android >= 7 last 3 iOS major versions' css/style.css -o css/style.css
コンパイル時にメッセージは表示されませんが、エラーが発生するとエラーになっている箇所が表示されます。監視を終了する際はCtrl(command)+Cでプロセスを終了させます。