Noob Front End Engineer Blog

CONTACT

npm-scriptsでDart Sassのコンパイル環境構築

2021/02/19

概要

今回は、npm-scriptを使用したSassの環境構築手順を紹介します!
説明するにあたって、大切な前知識があるのでまずはその紹介から入ります。

1. npm-scripts での環境構築

Sassの環境構築というとGulpを使用されている例が多いかと思います。
しかし 2020 年頃から、かの有名なフロントエンドロードマップでもそこまで注目されなくなり
npm-scriptsで殆どの事が解決できるのではないかという雰囲気に。

という事で今回はnpm-scriptsでの環境構築を行っていきます。

2. DartSass を使用したコンパイル

意外と知られていない事なのですが、厳密にはSassは3種類あります。

基本的な記述方法は同じですが、@import等細かな箇所で違いがあり、
独自の機能・記述方法を使用している場合には、乗り換えは少し手間になる事があります。

1. Ruby Sass

その名の通り、Ruby製のSassです。

このタイプの場合コンパイルにはcompassが使用されており、
config.rbという設定ファイルがあると思います。

3 種類のSassの内で最も古く、2019 年にサポートが終わっています。
昔から保守が続いているサイト・Web アプリ等ではよく見かけられます。

2. LibSass

こちらはC++製のSassで、このタイプはnode-sassでコンパイルが行われており
現在最も多く使用されています。

Gulpを使用している場合はgulp-sassになりますが、内部的にはnode-sassを使用しているみたいです

2021 年 2 月中旬の現在だと、記事等の情報も最も豊富で
node-sassの週間インストール数も 400 万回行われています 😮

但し、こちらも 2020 年 10 月にSassの公式から非推奨とされています。
実際の記事:https://sass-lang.com/blog/libsass-is-deprecated

3. Dart Sass

こちらも名前の通りDart製のSassになります。
Sass公式ではこちらが推奨されており、新機能の対応は
殆どこちらでしかされていない状態です。

しかし、現段階の週間インストール数ではnode-sassよりも少なく 280 万回となっており、世界的に見てもまだ普及しきっていないような状態で
特に日本での情報は多くありません。

という事で今回は、現段階では最新っぽい
npm-scriptsDart Sassでの環境構築を行っていきます!

前置き長くなってしまった…

環境構築

では、ここから実際にSassの環境構築手順を紹介していきます!

ディレクトリ作成

まずはテスト用のディレクトリを作成してpackage.jsonファイルの作成をしましょう!

# テストディレクトリの作成(名前は任意)
mkdir node-sass-compiler

# 移動・package.jsonの作成
cd node-sass-compiler

npm init

モジュールのインストール

次に使用するモジュールのインストールを行います。

module description
sass Dart 製の Sass コンパイラ
# モジュールインストール
npm install sass

まず、Sassのコンパイルを行ってくれるsassモジュールを使ってみましょう。

sass モジュールの使用方法

先ほど作成したpackage.jsonscriptsの箇所を下記の様に編集してみてください。

package.json
# --- 略 ---
"scripts": {
    "sass": "sass src/scss/:dist/css/ --no-source-map --watch"
  },
# --- 略 ---

上記のスクリプトの解説はこんな感じです。

# sass [コンパイル前ファイル(ディレクトリ)]:[出力先ファイル(ディレクトリ)]
sass src/scss/:dist/css/

使用しているオプションの--no-source-mapはソースマップを表示しない、
--watchはコンパイル前ファイル(ディレクトリ)の変更を検知して
コンパイルを実行してくれるものです。

オプション周りの詳細は下記公式を参考にしてください。
Dart Sassのコマンドラインドキュメント:https://sass-lang.com/documentation/cli/dart-sass

それでは実際にスクリプトを実行してみましょう!

npm run sass

これで/src/sass/ディレクトリ配下にsass or scssファイルを作成・編集すると、
コンパイルが行われ、/dist/css/ディレクトリにcssファイルが生成されます 😍

単純なコンパイルのみであれば、めちゃくちゃ簡単…!

参考

Dart Sassnpmhttps://www.npmjs.com/package/sass

Dart Sassのコマンドラインドキュメント:https://sass-lang.com/documentation/cli/dart-sass

Dart SassJS APIドキュメント:https://sass-lang.com/documentation/js-api


Written by daichi iwamoto