Sassの練習としてVScodeの拡張機能である「Live Sass Compiler」などを使うことがありますが、実際の業務ではこのような個人の環境に依存する方法は取れません。
そのため、今回は実際に行った「Live Sass Compiler」を使わずにSassをコンパイルする環境を作る方法を記録しておきます。
手順
Node.jsをインストール
インストールができたら、下記のコマンドでバージョン確認をしてください。
きちんとバージョンが表示されたらインストールは無事完了です。
※プロジェクトディレクトリ内でコマンドは打ってください。
node -v
npmで「Sass」パッケージをインストール
下記のコマンドを入力してください。
そうするとpackage.jsonというファイルがフォルダ内に作られたと思います。
※プロジェクトディレクトリ内でコマンドは打ってください。
npm init -y
次に、Sassを使うためのパッケージをインストールします。
そうすると、フォルダ内に、node_modulesとpackage-lock.jsonが生成されます。
npm install --save-dev sass
※package.jsonを開き、「devDependencies」を確認するとsassが入っているか確認してください。
コンパイルするためのコマンドを記述
package.jsonを開いて、scriptsの{}内にパッケージを実行させるコマンドを書きます。
例
"scripts": {
"sass": "sass src/style.scss css/style.css"
},
※「src」というフォルダの中に「style.scss」というファイルがある場合の記述です。
実際に使用する
実際に使用する場合には、下記のコマンドをターミナルで打ち込むことで機能させることができます。
実行するとコンパイルされることがわかると思います。
npm run sass
しかし、上記のままではcssファイルを更新するたびに「npm run sass」を実行しなければいけません。
これを解決するには、更新するたびに自動でコンパイルさせる設定にする必要があります。
下記の記述に書き換えることで、設定できます。
"scripts": {
"sass": "sass --watch css/style.scss css/style.css"
},