Visual Studio Code ユーザーであれば、SCSS (SASS) をコンパイルしたい場合、Visual Studio Code のタスクランナーを利用すれば簡単に実行可能です。
今回はその方法を説明したいと思います。
目次
- Visual Studio Code 上で SCSS をコンパイルする
- まとめ
Visual Studio Code 上で SCSS をコンパイルする
プロジェクトフォルダを Visual Studio Code で開きます。
以下はプロジェクト内に package.json や tasks.json がない場合の手順を説明しています。
node-sass をインストール
node-sass がグローバル、もしくはプロジェクトにインストールされていない場合、以下をターミナルで実行します。
[code]
npm install -g node-sass
[/code]
package.json の作成とスクリプトの追加
プロジェクト内に package.json がない場合、以下をターミナルで実行し package.json を作成します。
[code]
npm init
[/code]
package.json に node-sass を実行するためのスクリプトを追加します。
以下の例はプロジェクトルートの scss フォルダの styles.scss をコンパイルし、プロジェクトルートの css フォルダに styles.css を出力します。
[code]
“scripts”: {
“build-sass”: “node-sass -w –source-map true scss/styles.scss css/styles.css”
},
[/code]
tasks.json の作成
Visual Studio Code から Shift + Command + P -> Tasks: Configure Task -> Others でプロジェクトルートに tasks.json が作成されます。
tasks.json を Visual Studio Code で開き、node-sass のタスクを追加します。
[code]
{
“version”: “0.1.0”,
“command”: “npm”,
“isShellCommand”: true,
“args”: [“run”],
“tasks”: [
{
“taskName”: “build-sass”,
“isBuildCommand”: true,
“showOutput”: “always”
}
]
}
[/code]
タスク実行
Visual Studio Code から Ctrl + Shif + B でタスクランナーを実行すれば SCSS がコンパイルされます。
まとめ
tasks.json に node-sass のタスクを追加すれば、次回からは、タスク実行で SCSS がコンパイルされます。ターミナルは必要ありません。
Visual Studio Code で静的ページに SCSS だけ使用したコーディングを行いたい場合、もっとも簡単な方法の一つかと思いますので、ぜひお試しください。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
