Visual Studio Code で Sass(scss)コンパイルを行うシンプルな方法

前回紹介した Node.js の node-sass モジュールを VSCode エディターから呼び出して使えるようにしてみます

今回は VSCodeから Sass(scss)をコンパイル出来るようにするだけなので覚えることは最小限で、 使うのは Node.js の npm と node-sass モジュールだけです (^^)

VSCode の Sass サポートに関して紹介している Css, Sass and Less ページ がありますが、紹介されているような Grunt、gulp 等のツールを使わなくても大丈夫なので安心して下さい

※gulp 等のツールは様々なタスクを組み合わせて、複雑な作業を行いたい時に要検討

準備

node-sass

下記記事を参考に node-sass が使えるようにインストールして下さい

Sass(sccs) のコンパイルは node-sass がRuby不要でシンプルかつ高速!
Node.js の node-sass モジュールを使って Sass(scss)スタイルシートをコンパイルして css に変換する方法を紹介します。Rubyも不要だし、とても高速なのでお勧めです (^^)…

Visual Studio Code

マイクロソフトの Visual Studio Code のページからダウンロードして下さい

ダウンロードした VSCodeSetup-stable.exe を実行してインストールを行います
インストールは、全てデフォルトまま行いました。完了するとエディタが起動するのでバージョンを見ると 0.10.8 と表示されました

VSCode の使い方は、日本語のPDF資料 Visual Studio Code ファースト ステップガイド がありますので、先ずは 第2章の基本操作の部分を読んでみることをお勧めします

拡張機能(エクステンション)を導入していなくても、初期状態で Emmetによるスニペットや Markdown記法もサポートされていて、エディタ内で簡単にリアルタイムプレビューすることも出来ます

かなり高機能で拡張性もあり、動作も軽快なのでちょっと驚きです

Windows だととりあえず Ctrl Shift P もしくは F1 キーを覚えましょう

ここから様々な機能を呼び出せるようになっています
機能名等の関連する英文字入力に対して、対象を自動的に絞り込んでくれるので慣れれば便利ですが、最初はちょっと戸惑います (^_^;)

Sass コンパイル

それではさっそくSassコンパイルを行ってみましょう

前回の Sass(sccs) のコンパイルは node-sass がRuby不要でシンプルかつ高速! でも使用したWordpress の Celtis_s テーマの scss をコンパイルしてみます

とりあえずコンパイル

VSCode を起動して、メニューの File → Open Folder からダウンロードして解凍した celtis_s フォルダーを選択してオープンして下さい

VSCode-open-folder

このテーマには既に VSCode で簡単に node-sass を実行できるようにタスクファイル tasks.json と package.json を同包しています(説明は後述)

従って、Ctrl Shift B キーで Tasks: Run Build Task を実行すると Sass コンパイルが実行されます

VSCode-sass-build

こんな表示がされれば、正常に実行されました (^^)

Celtis_s テーマの Sass コンパイルのやり方としてはこれだけですが、どのような仕組みとなっているか説明します

仕組み

tasks.json 定義

VSCode には、タスクランナーという機能があり、ビルドや最適化などの処理を登録することが出来ます

Ctrl Shift P か F1 キーでコマンドパレットを開き、Configure Task Runner を選択すると隠しフォルダー .vscode に tasks.json ファイルが作成されます

※タスクを設定するには open folder でファイルを開く必要があります

tasks.jsonファイルには、初期状態でビルドや最適化の記述例がありますので、クリアしてタスク内容を記述します

Css, Sass and Less ページ  内でも紹介されているように node-sass を実行するだけなら下記のような記述を行えば基本的にはOKです

// Sass configuration
{
    "version": "0.1.0",
    "command": "node-sass",
    "isShellCommand": true,
    "args": ["sass/style.scss", "style.css"]
}

この記述で tasks.json を保存して Ctrl Shift B キーを押せば node-sass を外部タスクランナーとして実行し Sass コンパイルして CSS ファイルに変換します

1つのタスクしかなく、そのタスクに処理を割り当てるのはこれで十分ですが、args に渡すコマンドオプションの指定がどうもしっくりきません

例えば ”node-sass –output-style compressed sass/style.scss style.css” と実行したい場合

  • 誤:”args”: [“–output-style compressed sass/style.scss style.css”]
  • 誤:”args”: [“–output-style compressed”, “sass/style.scss”, “style.css”]
  • 正:”args”: [“–output-style”, “compressed”, “sass/style.scss”, “style.css”]

関連するペアのオプションをひとくくりにせず、全てバラバラにして指定する必要がありオプションが多いとわけが分からなくなります

なんでこんな仕様になっているのかは不明です。コマンドラインから入力する代わりのアクションで簡単に実行するための仕組みなので引数の指定もシンプルで良い気がします

VSCode の tasks.json だけで済むのが理想ですが、様々なオプションを指定した時になかなか思うように動作しなかったので、今回は Node.js の npm でサポートされているスクリプトを使ってみました

作成した tasks.json です

// Sass build
// このファイルは Node.js の node-sass モジュールを使って scss ファイルをビルドする為の定義です
// Ctrl+Shift+B で scss ファイルを変換して css ファイルを生成します
// npm run build-sass が実行されると package.json 内の build-sass に記述されている node-sass コマンドが実行されます  
// ビルドオプションの ファイル変更監視、マップファイル、出力書式タイプ等は package.json 内で指定します
// オプション内容は https://www.npmjs.com/package/node-sass を参照して下さい
// 例:node-sass -w --source-map true --output-style compressed sass/style.scss style.css",
{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "args": ["run"],
    "tasks": [ 
        { 
          "taskName": "build-sass",
          "isBuildCommand": true,
          "showOutput": "always"
        }
    ]
}

VSCodeのタスクに登録するのは npm run build-sass です

npm と言うのは node のパッケージマネージャでスクリプトの実行機能も持っています
そこで build-sass というタスクを実行させています

それでは build-sass と言うタスクはどこにあるのかというと npm が package.json というファイルを参照するようになっていますのでその中に記述します

package.json 定義

Celitis_s のフォルダー内に package.json というファイルを作成して下記を記述します

{
  "name": "node-sass-build",
  "version": "0.1.0",
  "scripts": {
     "build-sass": "node-sass --source-map true sass/style.scss style.css"
  }
}

内容はシンプルなので分かりやすいと思います

scripts の中に タスク名 build-sass とその実行内容 “node-sass …   ” をコマンドラインから入力し他場合と同じようにそのまま書くだけです

※package.json については npm package.json 日本語版 取扱説明書 を参照して下さい
※node-sass のオプションは node-sass ページ を参照して下さい

補足

複数タスクから選択実行

VSCode のタスクの詳細は不明な部分も多いのですが、isBuildCommand が true の場合は、Ctrl Shift B キーで、このタスクが実行されます

複数のタスクを定義して選択したい場合は isBuildCommand : true の記述を止めて、F1 コマンドパレットから  Tasks: Run Task を実行すると tasks.json に登録されているタスクリストが表示されるので選択して実行できます

VSCode-run-task

タスクの強制停止

何らかの理由で実行中のタスクを停止させたい時は、F1 コマンドパレットから  Tasks: Terminate Running Task を実行すると停止することが出来ます

ファイル変更監視

Css, Sass and Less ページでは gulp を使った方法が紹介されていますが、pakage.json の node-sass のオプションに -w を加えればファイル変更を監視できます

但し、最初の1回だけ ctrl Shift B でタスクを実行させる必要があります。1回実行すればその後は scss ファイルが変更されると自動的にコンパイルするようになります

"build-sass": "node-sass -w --source-map true sass/style.scss style.css"

ファイル変更監視を停止したい時は Tasks: Terminate Running Task を実行して下さい

個人的には、変更監視させなくても ctrl shift B キー1発で実行できるので監視する必要性はあまり感じていません (^^)

以上

VSCodeで簡単に Sass コンパイルする方法を紹介しました

 


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss