2023.07.26
2023.07.29 (更新日)

【Dart Sass】VSCodeのDart Sassを使いやすくし、使用のルーティーンまで解説【DartJS Sass Compiler and Sass Watcher】

WEB制作

この記事は、以下の記事の続編となっています。

前編

【Dart Sass】VSCodeでSASSを使うために拡張機能DartJS Sass Compiler and Sass Watcherで環境構築する

DartJS Sass Compiler and Sass Watcher拡張機能（以下プラグイン）はインストールしただけでは、分割ファイル（以下パーシャルファイル）の保存時は反映されず、不便ですよね。

この記事では、Visual Studio Code（以下VScode）のDartJS Sass Compiler and Sass Watcherをインストールした状態から、

パーシャルファイルを保存しただけで、パーシャルファイルの変更を反映させることができるようにしていきます。

また、プロジェクトフォルダ立ち上げ時に毎回行う作業をルーティーン化できるように手順を解説していきます。

使い方を覚えるまでは、プロジェクトフォルダを立ち上げるたびにこの記事を見ることになると思いますので、ブックマークしておくことをおすすめします。

なお、本記事ではMac環境を想定して解説しています。

Sassのまとめ記事はこちら

まとめ記事

【Sassまとめ】Sassについて知りたいこと、導入方法や使い方や全部わかる

この記事を読んで欲しい人

VSCodeを使用していて、Dart Sassの環境構築をしたい人
VSCodeでDartJS Sass Compiler and Sass Watcherをインストールした人
DartJS Sass Compiler and Sass Watcherを使いやすくしたい人
Macを使用している人
Sassを使用するルーティーンを作りたい人

下記はこの記事のおおまかな流れになります。

Homebrewのインストール（Terminalアプリを使用）
Nodebrewのインストール（Terminalアプリを使用）
Node.jsのインストール（Terminalアプリを使用）
ルーティーンの解説

Node.jsをインストールする

まずはNode.jsをインストールするために、「Homebrew」と「Nodebrew」をインストールしていきます。

各インストールにはMacのターミナルアプリを使用します。

今回は、ターミナルで使用するコードは全てコピペできるように掲載していますので慣れていない方も安心してインストールできると思います。

Homebrewをインストールする

まずはHomebrewをインストールしていきます。
以下のページにアクセスしてください。

Homebrew

遷移したサイトに下記の記載があります。

“これをmacOSのターミナルまたはLinuxのシェルプロンプトに貼り付けて下さい。”
https://brew.sh/index_ja.html

このコードをMacのTerminalアプリに貼り付ることになります。
右側のボタンをクリックしてコードをコピーしておきましょう。

MacのFinderの「アプリケーション」フォルダの中からTerminalを探すか、
Finderの検索窓からTerminalを検索して起動します。

Homebrewでコピーしたコードをペーストし、キーボードのエンターを押します。

するとパスワードの入力を求められるので、Macのロック解除する時に使うパスワードを入力します。

画像のように==> Installation successful!と表示されたらインストール完了です。

また、インストール完了の文言下に下記のような記述があると思います。

==> Next steps:
- Run these two commands in your terminal to add Homebrew to your PATH:
    (echo; echo 'eval "$(/usr/local/bin/brew shellenv)"') >> /Users/wakame/.zprofile
    eval "$(/usr/local/bin/brew shellenv)"
- Run brew help to get started
- Further documentation:
    https://docs.brew.sh

次のステップとしてHomebrew を PATH に追加する、という文言で、記述内の下記のコードを貼り付け、エンターをクリックします。

echo; echo 'eval "$(/usr/local/bin/brew shellenv)"') >> /Users/wakame/.zprofile
    eval "$(/usr/local/bin/brew shellenv

最後に下記のコードを入力し、Homebrewのバージョンが表示されれば完了です。

brew -v

「PATHに追加する」「パスと通す」とは？

ターミナルでコマンドを実行する際に、特定のディレクトリ（フォルダー）にあるコマンドを直接実行できるようにすることです。

Nodebrewをインストールする

さきほどインストールしたHomebrewを使用してNodebrewをインストールすることができます。
下記のコードをTerminalに入力し、エンターをクリックします。

brew install nodebrew

完了したコード内に「Add path」の記載がありますので、下記のコードをTerminalに入力し、エンターをクリックします。

export PATH=$HOME/.nodebrew/current/bin:$PATH

最後に下記のコードを入力し、Nodebrewのバージョンが表示されれば完了です。

nodebrew -v

Node.jsをインストールする

最後にNode.jsをインストールします。
下記のコードを入力し、エンターをクリックします。

nodebrew install-binary stable

今回は指定されたフォルダが存在しないという内容のエラーが出てしまいました。

下記の「mkdir」コマンドでフォルダを作成した後に「nodebrew install~」のコードを入力します。

mkdir -p ~/.nodebrew/src

nodebrew install-binary stable

Installed successfully と表示されていればインストールは完了です。
下記のコードでバージョンが表示されるか確認してみましょう。

nodebrew ls

バージョンは表示されていますが、「current: none」と記載されており、有効化されていない状態です。
下記のコードで有効化しましょう。

また、バージョンの部分はインストールされたバージョンを入力してください。

nodebrew use v20.5.0

ご自身のインストールしたバージョンに置き換えて入力しましょう

再度nodebrew ls コマンドでバージョンを確認したらインストールは完了です。

最後にNode.jsでもパスを通しておきます。
ターミナル上部に書いてある文言が「bash」か「zsh」でコマンドが変わりますので、
ご自身の環境に合わせてコードを選択してください。

zshの場合

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

bashの場合

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

Terminalを再起動し、下記のコードでNode.jsのバージョンが表示されたら、インストール作業は全て完了となります。

node -v

Sassを使う時に毎回やるルーティーン

ルーティーンの流れは以下になります。

sassをローカルインストール
DartJS Sass Compiler and Sass Watcherにsassがある場所（パス）を登録
sassファイルを監視させる

ここからはVSCode内で行う作業になりますので、VSCodeを開いてください。
それでは解説していきます。

sassをローカルインストールする

sassをプロジェクトフォルダにインストールします。
（sassを使用するプロジェクトフォルダを作成したら毎回する）

sassはVSCodeのターミナルでインストールするため、VSCodeのターミナルを開きます。

画面最上部のメニューから「ターミナル」->「新しいターミナル」をクリックするか、
[control] + [shift] + [^] キーを入力します。

ターミナルに下記のコードを入力し、package.json ファイルを作成します。

npm init -y

ターミナルに下記のコードを入力し、sassをインストールします。

npm i -D sass

このインストールしたsassはこのプロジェクトだけで使えます。

「node_modules」というフォルダが生成されました。
このフォルダの中にsassが入っています。

また、「package.json」にsassに記述が追加されています。

DartJS Sass Compiler and Sass Watcherにsassがある場所（パス）を登録する

この作業は最初の一回のみ必要になります。

「基本設定」 -> 「設定」をクリックするか、[command] + [ , ] を入力して設定を開きます。

Dartsass:Sass Bin Path

上記を設定内にある検索窓に入力し、表示された設定箇所に下記を入力します。

node_modules/sass/sass.js

これで設定は完了です。

sassファイルを監視させる

sassフォルダを右クリックし、「DartSass: Sass Watch」をクリックします。
VSCodeの画面最下部のバーに「Sass Watchers: 1」と表示されていれば設定完了です。

これでstyle.sass（style.scss）や分割（パーシャル）ファイルどのファイルを変更 / 保存してもコンパイル（CSSに変換）されます。

お好きなファイルを作って確認してみましょう。

結論・まとめ

DartSassがstyle.scssや分割（パーシャル）ファイルどのファイルを変更 / 保存してもコンパイル（CSSに変換）されるようになりました。

少々インストールや設定が厄介ですが、かなり便利な機能が多いので、ぜひ使用してみてください。

参考記事

【VSCode】Dart Sassが使えるプラグイン『DartJS Sass Compiler and Sass Watcher』の使い方