VS CodeやSublimeTextなどWEB関連のソース(HTML,CSS,プログラム)を記述する時の環境についてのTipsをメモっていきます

Visual Studio Code で SCSS(SASS)のコンパイルを行う

node-sass は古いパッケージとなりましたので dart sass へ移行しましょう ↓ ↓ ↓

dart sass を VS Code で使用して SCSS (SASS)をコンパイルする|プログラムメモ

node-sass は古いパッケージとなりましたので dart sass へ移行しましょう ↑ ↑ ↑



● 1. node-sass のインストール

npm install -g node-sass

● 2. Visual Studio Code で SCSSのビルドファイルを作成する

   1. Visual Studio Code で 何かの .scss ファイルを開く

   2. メニューの「タスク」→「規定のビルド タスクの構成」を選択

   3. tasks.json を下記のようにする

( 例 scss ファイルをビルドして ../../www/assets/css/ へ書き出します。 ディレクトリは適宜書き換えてください)

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo",
            "type": "shell",
            "command": "node-sass",
            "args": [
                "${fileBasenameNoExtension}.scss", "../../www/assets/css/${fileBasenameNoExtension}.css"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

● 3. ビルドの実行

こちらの test.scss ファイルを test.cssファイルヘ変換してみます。 test.scss

body {
  color: #333;
  h1 {
    color: #666;
  }
}

test.scss を開き、メニューの「タスク」→「ビルド タスクの実行」でビルドを実行します。 .scss ファイルから .css ファイルが生成されていることを確認します。

● 4. 保存した時に自動的にビルドを実行するようにする

毎回ビルドを実行するのは面倒なので、保存した時に自動的にビルドをするように設定します。

   1. 拡張機能「Save and Run」をインストールする

   2. メニューの「基本設定」→「設定」を開く。(フォントサイズ等を指定する画面が開きます。)

   3. 右側のウィンドウに下記項目を追加

   "saveAndRun": {
        "commands": [
          {
            "match": "\\.scss$",
            "cmd": "node-sass ${fileBasenameNoExt}.scss ../../www/assets/css/${fileBasenameNoExt}.css",
            "useShortcut": false
          }
        ] 
      }

これで保存するだけで自動的に scss → css 変換が行われます。

No.1211
12/22 18:25

edit