[VSCode]Visual Studio CodeでSassをコンパイルする方法の覚書

harada 371views 更新:2017年6月5日

あらかじめ、NPM、Node.jsをインストールしておきます。

(1). VS Codeを開き、Shift+Command+P ショートカットで「コマンドパレット」を開きます。
(2). Configure Task Runnerと入力して、Enterで選択します。
(3). 次に表示される画面で「Others」を選択します。
(4). 以下の内容を記入したサンプルの「tasks.json」ファイルを「.vscode」フォルダーに作成します。  

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

(5). 次に開いているフォルダの一番上の位置に 「package.json」 というファイルを作成して、以下の内容を記述します。
site/sass/style.scss site/css/style.cssは、適宜変更して下さい。

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

Shift + Command + B のショートカットでコンパイルが開始されます。
一度行ったあとはscssファイルの保存の度にコンパイルされると思います。


実際に動いたあとで覚書を記入したので、うまくいかないところがあるかもしれません。。
その際は以下の2つの記事を参考にしてみてください。

参考:Visual Studio Code で Sass(scss)コンパイルを行うシンプルな方法
CSS, Sass and Lessサポート

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません