node-sassの導入方法
まずnode-sassを使用するにはNode.jsがインストールされている必要があります。
homebrew等を使ってNode.jsのバージョン管理を行う方法もありますが、Sassのコンパイルのみでしか利用しない場合は公式サイトからファイルをダウンロードしてインストールするのが簡単です。
インストールが完了したら、Windowsの場合はコマンドプロンプト、Macの場合はターミナルを起動して、下記のコマンドを入力してください。
node -v
v10.16.3のように表示されたらインストール成功です。
（数字は上記と同じでなくても問題ありません）
プロジェクト内にnode-modulesをインストール
まずはpackage.jsonを作成する必要があります。
プロジェクト内でnpmを配置するディレクトリにcdコマンドで移動します。
移動したら下記のコマンドを入力
npm init
入力すると下記の画面になると思います
package name: (パッケージの名前)
version:(1.0.0) でバージョンを生成するかどうか、問題なければEnter
description: 概要説明 （例 sample Landing page) 無記載でもよければEnter
entry point:(index.js) そのままエンターを押すと初期表示ファイルをindex.jsファイルのままにする
test command: 無記載でEnterを押すとテストコマンドを設定せず進める
git repository: Githubに保存するリポジトリ情報を登録するかどうか
keywords: npm公開時に使用されるkeywords設定 無記載Enterで設定せず進める
author: 作者情報 （例 Accio
licens: defaultのISCで問題なければそのままEnter
入力し終えると最後に上記の情報でいいか聞かれるので問題なければyes
上記の作業を終えるとディレクトリ内にpackage.jsonが作成されている。
作成されてるのを確認したら
npm install node-sass --save-dev
これでフォルダ内にnode_moduleが作成される。
次のステップ
ディレクトリ内にmkdir sassでフォルダを作る
cd sassで移動し touch main.scss
ここまで出来たらpackage.jsonのscriptsを変更する
"scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css -w"
}
*自身のディレクトリ構造に合わせ変更してください
この状態でnpm run compile:sassを実行するとコンパイルされます。
-w(watch)オプションをつけているので変更を加えた場合はその都度コンパイルが実行されます。
-wオプションをつけないと変更の度にコマンドを実行しないといけないため少々めんどくさいです。
終了するときは^Cです。
まとめ
導入の流れは以上となります。
間違い、他にいい方法がありましたら教えていただけると助かります。
この記事が少しでもお役に立てれば幸いです。