【Mac】【VSCode】【DartJS Sass Compiler】DartSass導入の方法

自分のための備忘録。

ー　前提　ー

📍 Sassはローカルに落とす（デスクトップのフォルダ）
📍 VSCodeのDartJS Sass Compilerプラグインを使用
📍パーシャルでcssファイルを分割し使用

ー　方法　ー

① VSCodeの拡張機能で「DartJS Sass Compiler」をダウンロード

② Node.jsをターミナルでインストール

Node.jsはプロジェクト毎ではなく一度インストールすればOK
ターミナルを開き「node -v」を実行

③ ローカル(作業したいプロジェクトのフォルダパス)にSassをインストール

ターミナルで↓を実行

cd /Users/name/Desktop/practice/8
npm init
npm install sass

上記の場合はパソコンのデスクトップにあるPracticeというフォルダの中の８フォルダにインストールしたい

下記の様な表示が出たらインストール完了！
何回か「Enter」を押さないと完了しない

追記：2022/11/7 なかなか指定するフォルダにpackage.jason が入らなかったが原因は該当フォルダまでしっかり移動してからインストールしていなかったこと。

/Uers/name/

の段階でインストールしてしまっており、package.jasonが上記の部分に保存されていた。そのため、cdで移動してからインストールした。
インストールも下記の３文を一つづつ実行したら該当フォルダにインストールできた。

cd /Users/name/Desktop/practice/8
npm init
npm install sass

④ 該当フォルダに「package.jason」フォルダが入っているか確認

通常であればpackage.jasonと一緒に「node_modulesディレクトリ」が作成されるはずだが作成されなかったため、再度「node_modulesディレクトリ」を作成するためのコードを実行

⑤該当フォルダに「node_modules」を作成する

ターミナルで下記を実行

cd /Users/name/Desktop/practice/8
npm install sass

package.jsonができたことでsassをローカルにインストールすることができるようになったかもしれない、らしい（理由はあまりわかってない）

ここまでで、一応Sassが該当プロジェクトフォルダにインストールできた！ということになる

⑥ 「DartJS Sass Compiler」の拡張機能「Sass Bin Path」にパスを入力

VSCodeの左一番下にある四角が並んでいるアイコンをクリック
「DartJS Sass Compiler」を検索し選択
右下の歯車アイコンをクリック
「拡張機能の設定」をクリック

「command + F」で検索窓を出し、「Sass Bin Path」を入力
該当する箇所に「該当フォルダ＋node_modules/.bin/sass」と入力

これでパスが設定できた！

⑦　sassフォルダの中にstyle.cssを吐き出す様に設定する

VSCodeの「package.jason」の「scripts」 の中に下記を記入

"sass" : "sass --watch sass:css"

参考：https://www.youtube.com/watch?v=VWDjpTGWW60&t=434s

上記を終えると下記のフォルダ構成になる

sassフォルダの中にstyle.cssが入っている（CSS Onlyフォルダは謎、でも後で見返すとき便利）

 
⑧ コンパイルができるかチェックする

VSCodeで該当のフォルダを開く
Sassフォルダの上で右クリックし「DartSass: Sass Watch」を選択
下の青いバーのところに「 Sass Watchers」と表示されれば成功!

一応、これで自分はパーシャルも＠useも使える様になったよ〜！！！
なかなかpackage.jasonが該当ファイル内にインストールされず、パスを指定してもうまくいかなかったので次回から気をつけよう…
次回他のプロジェクトでSassをインストールする際は③から行えばOK！