今回は、SASS(DartJS Sass)を導入していこうと思う。
今までSASSについて、曖昧な認識だった件について
昔、仕事でsassを利用していましたが仕事が忙しかったせいもあって、sassについて良くわからないまま使っていたところがある。
rubyを利用しているので、サーバーサイドを利用したオンラインのシステムだと思っていました。
色々記事をちょい読みした結果、
サーバーにもインストールできるし、PCにもインストールして使えるようです！
そりゃ、そうだ。
node.jsとかrubyとか使ってるんだから、PCにもサーバーにも入れられて当然だ。
ただのコンバータープログラムなんだから変換してくれるウェブサービスとかもあっても良いくらいだ。
っと、調べたらcss→sass→lessとか、オンライン上で変換してくれるサービスありました。
途中まで書いていたcssをsassに手書き変換しようと考えていたから、オンラインサービス使えばその分の工数が短縮できる！
あとで、使ってみよ。
SASS導入について
昔、rubyを入れてやっていたので今回もrubyを入れる所からかな？と考えていたのですが、違うみたいです。
- Ruby Sass
- LibSass
- Dart Sass
sassは、上記の順で発展してきて今はDart Sassが推奨されているそうです。
SASSの@importが廃止となり、新たに導入されたモジュールシステムの@use, @forwardが採用されています。
今回は、VSCodeの拡張機能のDart Sassを入れていきたいと思います。
VScodeの拡張機能なので、そんなに難しくないと思います。
Dart Sassのコンパイル方法 (scssファイルが1つの場合)
VScodeの拡張機能[Dart Sass]を導入する。
Step1：DartJS Sass Compiler and Sass Watcherをインストールする
VScodeの拡張機能からDartJSを検索してインストールする。
Step2：DartJS Sass Compiler and Sass Watcherの設定をする
コンパイルされたファイルをどこに出力するかの設定を行います。
[Dartsass: Target Directory]の箇所にcss/を書く。
実際に試してみる。
project > scss > style.scss
> index.html
上記の構造にして、scssを保存すると自動的にコンパイルされてcssファイルが生成させる。
ソースマップを吐き出さないようにする。
dartsass.disableSourceMap
ソースマップの設定。デフォルトで生成されるようになっています。
他の詳しい設定については自分でググってください。
Dart Sassのコンパイル方法(scssファイルが複数ある場合)
実務では、scssファイルを役割ごとに複数ファイルに分割し、最終的に1つのcssファイルにまとめてコンパイルすることが多いです。
ここでは、scssファイルが複数ある場合のコンパイル方法を紹介します。DartJS Sass Compiler and Sass Watcherのインストールは既に済んでいるものとします。
つまり何が出来るようになるのかというと、
DartJS Sass Compiler and Sass Watcherは、本来[ _aaa.scss ]のようなアンダーバーから始まるscssファイルは保存した時に自動的にコンパイルしてくれないのだけれど、node.jsとsassを入れる事でアンダーバーから始まるscssファイルを監視してくれるようになって、アンダーバーから始まるscssファイルを保存した時に自動的にコンパイルをしてくれるようになる。という事です。
- ファイルの構成を確認
- Node.jsとsassをインストールする
- DartJS Sass Compiler and Sass Watcherの設定をする
- 実際に試してみる
ファイルの構成を確認
下記のサイトを参考にやっているので、ファイル構成については下記のサイトを見てください。
https://moshashugyo.com/media/dart-sass
Node.jsとsassをインストールする
@use, @forwardは、別途sassをインストールしないと使えるようになりません。
sassをインストールする際は、グローバルかローカルにインストールします。
※ ローカルにインストールする場合、正確にはそのプロジェクト以外でも使えますが、普通はそのプロジェクトでしか使いません。
グローバルにインストールするとどこからでも使える一方で、複数人で開発する際やプロジェクトによって使うバージョンが違う際は不便です。
従ってローカルにインストールすることをおすすめします。
- Node.jsのインストール
- sassのインストール
Node.jsのインストール
sassのインストールにはnpmを使うので、Node.jsのインストールが必要になります。
npmとはパッケージ管理システムで、Node.jsをインストールすることで使えるようになります。パッケージとは何かなどの説明は省略します。sassをインストールするためにnpmが必要だと思っていただければOKです。
Node.jsのインストールはProgateの記事が丁寧に解説してくれています。
今回は、node.js18.12.1 LTS 推奨版をインストールしました。
インストールが終わったら、下記のコマンドでインストール確認をする。
node -v
npm -v
インストール先path
C:\Program Files\nodejs
SASSのインストール
sassのインストールコマンドは、下記になります。
| インストール場所 | コマンド |
|---|---|
| グローバル | npm install -g sass |
| ローカル | npm install sass |
- グローバルインストール ： PC上のどこからでも利用できる様になる
- ローカルインストール ： プロジェクトのフォルダ内でのみ利用できる様になる
解説サイトには、ローカルの方のコマンドでprojectのフォルダ内にsassをインストールするって書いてあるけど…
別のprojectでsassを使う時、新規でsassインストールしてVScodeのDartSassのパスを変更しなきゃじゃない？
それなんかおかしいよね？？？
sassをインストールするなら、グローバルの方にすべきだと思うんだよね。
違うかな？と思って調べてみました。
グローバルインストールが推奨されていない理由
グローバルインストールでのメリットは、インストールしたフォルダにパスが通っている場合は ./node_modules/.bin/gulp などと長いコマンドを叩く必要なく、 gulp と入力するだけで使えるようになることだけです。他のプロジェクトで再度インストールしなくてもよくなるというメリットもありますが、そのメリット以上に、弊害が大きかったりします。
グローバルでインストールをしてしまうデメリットは、利用したいプロジェクトだけでなくPC全体でインストールされるため、プロジェクト毎に違ったバージョンの gulp をつかっている場合に問題が起きる可能性があります。
例えば1年前にリリースしたプロジェクトで修正や変更が発生した場合に、グローバルでインストールをしてしまっているとバージョン差異が発生してしまい、エラーの原因になったり、違ったものが出力されてしまう原因になってしまいます。
グローバルでインストールをせずに各プロジェクト毎にインストールをしておけば、過去に対応していたプロジェクトに戻っても、その当時のバージョンで再度動作させることができるので、グローバルインストールにならない、ローカルインストールで使えるようにしておくほうがよいです。
という事らしい。
なるほどね。
そういう事なら、ローカル一択だわ。
という事で、projectフォルダに移動してインストールします。
下記コマンドで、プロジェクトのディレクトリーに移動して
cd C:\Users\ユーザー名\Desktop\project
下記コマンドを実行すると…
npm install sass
なぜか、projectのフォルダ内に node_modulesフォルダ が出来ない！
What’s!?
色々探してみると、何故か、C:\Users\ユーザー名\の中に出来ている…
なんで？
んで、なんやかんや調べてprojectのフォルダ内で下記のコマンドでnpm初期化処理をする。
npm init上記コマンドを実行してから、下記コマンドを実行したら…
npm install sassprojectフォルダ内に、node_modulesフォルダが出来ました。
ここまで出来たら、DartJS Sass Compiler and Sass Watcherの設定でパスを通す。
Dartsass: Node Exe Path
C:\Program Files\nodejs\node.exe
Dartsass: Sass Bin Path
C:\Users\ユーザー名\Desktop\project\node_modules\sass\sass.js
ここまで出来たら、試してみる。
scssフォルダを右クリックし、「DartSass:Sass Watch」を選択すると、そのフォルダ配下がウォッチ(監視)されます。
要するに _から始まるscssファイルが保存されたらstyle.scssがコンパイルされるって仕組み
_から始まるscssファイルを修正し保存すると、style.cssが改変される事を確認する。
以上！
下記サイトも参考になる。
https://qiita.com/twipg/items/9313034734be72acc199
VScodeの拡張機能[Live Server]を導入する。
DartJS Sass入れる時に見つけたので、ついでに入れておく。
Live Serverは、VScodeでhtmlを保存したら自動的にブラウザを更新してくれるツールだ。
cssを修正するたびに更新ボタンを押す手間が省けるので作業効率がアップするよ！