Sassコンパイル(ベンダープレフィックス/圧縮編)

前提

この記事ではSassコンパイル時にベンダープレフィックスと圧縮を行います。

環境はmacです。
個人練習ようなので実務ではパッケージ管理ツールやscriptの書き方は異なる部分もあるので予めご了承ください。

npmとSassの環境があることが前提のため、これからSassを使い始める方は以下で下準備があるとかなりスムーズです。
Sassコンパイル(とりあえずコンパイル編)

【使用するSassパッケージ】
○ : Dart Sass =　パッケージ名sass
× : node Sass =　パッケージ名node-sass

下記理由のためDart Sassを採用しております。

@rithmetyさんコメントより(ありがとうございます)
node-sass の公式より引用（ google 翻訳 ）
警告: LibSass と NodeSass は非推奨です。これらは無期限にメンテナンスされ続けますが、追加機能を追加したり、新しい css または Sass 機能との互換性を追加したりする予定はありません。それをまだ使用しているプロジェクトは、 DartSass に移動する必要があります。
https://sass-lang.com/blog/libsass-is-deprecated
https://github.com/sass/node-sass#node-sass

手順

1.必要なモジュールとプラグインのインストール
2.package.jsonにscriptを記述
3.コンパイル実行

1.必要なモジュールとプラグインのインストール

• postcss-cliは、CSSを変換できるツール「PostCSS」をコマンドから利用できるパッケージです。
• autoprefixerは、そのPostCSSでベンダープレフィックスを追加できるプラグインとなります。

npm install postcss postcss-cli autoprefixer --save-dev 

2.package.jsonにscriptを記述

スクリプト　

"scripts": {
  "dev-compile:css": "sass sass/main.scss css/style.css --style expanded --watch | postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css",
  "pro-compile:css": "sass sass/main.scss css/style.css --style compressed | postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css"
},

先にスクリプトを載せます。ワンライナーでオプションもあるので少し長めですが
1行目は開発用(dev-compile:css)で2行目は本番用(pro-compile:css)です。

ポイント

２行それぞれのスクリプトは "キー": "コマンド"という構成です(イメージ)。
ターミナルでnpm run キーでコマンド部分の処理が実行されます。
また、コマンド部分はパイプライン(|)でつなげているので、１行ですが２つのコマンドが実行されているということになります。

※ 最初のsassが実行されるためには、冒頭記載しましたがsassパッケージはインストールされている必要があります。まだの方は以下からお願いします。
Sassコンパイル(とりあえずコンパイル編)

コマンド部分の解説

開発用(dev-compile:css)１行目

"dev-compile:css": "sass sass/main.scss css/style.css --style expanded --watch | postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css"

意図
開発中にいちいちコンパイルするのは面倒だから、Scssファイルを編集/保存すると同時に勝手にコンパイルして欲しい！
コンパイル後のstyle.cssファイルには、ベンダープレフィックスを付けて欲しいのと
確認することもあるから人が見てもわかるような普通の形式で出力してね👍
とコマンドは申しています。

説明

1. sass sass/main.scss css/style.cssでsass/main.scss→css/style.cssにコンパイルします。
2. --style expandedオプションでコンパイル後の出力形式で普通のCSSの書き方を指定しています。
3. --watchオプションでScssファイルを編集/保存した際自動的にコンパイルされるようになります。
4. postcss --use autoprefixer -b 'last 10 versions'で最後の10バージョンのブラウザで崩れないようにベンダープレフィックスが自動でつきます。

本番用(pro-compile:css)２行目

"pro-compile:css": "sass sass/main.scss css/style.css --style compressed | postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css"

意図
コンパイル後のstyle.cssファイルには、ベンダープレフィックスを付けて欲しいのとパフォーマンス重視でソースコードをぎゅっと圧縮してね👌
とコマンドは申しています。

説明（開発用との違いのみ)

1. --style compressedオプションでコンパイル後の出力形式を圧縮を指定しています。
2. --watchオプションは不要なので削除しています。

補足

■「--style expanded」オプションは用途に応じて４種類nested/expanded/compact/compressedあります。
※以下サイトはnode-sassの--output-styleで書かれてますが、今回のDart-sassの--styleに置き換えてご覧ください。
(詳しくはこちら)

■「postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css」の-oオプションはoutputの略。
左のファイルに加工を加え右のファイルが出来上がるということです。
今回は上書きして欲しいので同じファイル名にしてます。

■「last 10 versions」はより詳細にどのブラウザのどのバージョンまでに対応させるかを設定できます。
(詳しくはこちら)

3.コンパイル実行

1. ターミナル起動。cdでプロジェクトディレクトリに移動。
2. npm run dev-compile:css (もしくは、pro-compile:css)を実行。

dev-compile:cssを実行した場合、--watchオプションがついているため常にプロセスが実行されるので、これ用のターミナルを新たにたてて実行することをおすすめします。(プロセスを終了したいとき : Ctl+C )

個人メモ

今回使用したpackage.json

※iconfontの外部CSSをcatするためにconcatも入ってますが特に不要です。
新しいプロジェクトで流用する場合は上をルートディレクトリに設置後以下コマンドで同じ環境が再現できる。
パッケージ数にもよりますがnpmやNode.jsの環境がすでに整っている場合は、この作業ですぐにSassコンパイルが使えるようになります。

npm install

package.json

{
  "name": "xxxx",
  "version": "1.0.0",
  "description": "xxxxxxxxxxxx",
  "main": "index.js",
  "scripts": {
    "dev-compile:css": "sass sass/main.scss css/style.css --style expanded --watch | postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css",
    "pro-compile:css": "sass sass/main.scss css/style.css --style compressed | postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.0.2",
    "concat": "^1.0.3",
    "fibers": "^5.0.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.1.10",
    "postcss-cli": "^8.3.0",
    "sass": "^1.29.0"
  }
}

liveServerはエディタの拡張機能で

編集内容がブラウザにリアルタイムで反映されるliveServer機能は、エディタに実装しています。
(VScodeのliveServer)

今回のSassコンパイルのケースも、ファイル更新は「--watch」しているので
上記拡張機能入れておくとコンパイルと同時にブラウザにも変更内容が反映されてより便利かと思います。

参考記事