Mac: Visual Studio Code 上で SCSS をコンパイルする

Visual Studio Code ユーザーであれば、SCSS (SASS) をコンパイルしたい場合、Visual Studio Code のタスクランナーを利用すれば簡単に実行可能です。
今回はその方法を説明したいと思います。

目次

  • Visual Studio Code 上で SCSS をコンパイルする
  • まとめ

Visual Studio Code 上で SCSS をコンパイルする

プロジェクトフォルダを Visual Studio Code で開きます。
以下はプロジェクト内に package.jsontasks.jsonない場合の手順を説明しています。

node-sass をインストール

node-sass がグローバル、もしくはプロジェクトにインストールされていない場合、以下をターミナルで実行します。

npm install -g node-sass

package.json の作成とスクリプトの追加

プロジェクト内に package.json がない場合、以下をターミナルで実行し package.json を作成します。

npm init

package.jsonnode-sass を実行するためのスクリプトを追加します。
以下の例はプロジェクトルートの scss フォルダの styles.scss をコンパイルし、プロジェクトルートの css フォルダに styles.css を出力します。

"scripts": {
    "build-sass": "node-sass -w --source-map true scss/styles.scss css/styles.css"
  },

tasks.json の作成

Visual Studio Code から Shift + Command + P -> Tasks: Configure Task -> Others でプロジェクトルートに tasks.json が作成されます。
tasks.json を Visual Studio Code で開き、node-sass のタスクを追加します。

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "args": ["run"],
    "tasks": [ 
        { 
          "taskName": "build-sass",
          "isBuildCommand": true,
          "showOutput": "always"
        }
    ]
}

タスク実行

Visual Studio Code から Ctrl + Shif + B でタスクランナーを実行すれば SCSS がコンパイルされます。

まとめ

tasks.json に node-sass のタスクを追加すれば、次回からは、タスク実行で SCSS がコンパイルされます。ターミナルは必要ありません。
Visual Studio Code で静的ページに SCSS だけ使用したコーディングを行いたい場合、もっとも簡単な方法の一つかと思いますので、ぜひお試しください。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents