npm環境にせず、面倒なことせずのまま、VS CodeのみでSassコンパイルをするお手軽＆カンタンな方法をご紹介します。
VS Codeで簡単コンパイルする方法（拡張機能）
Live Sass Compilerインストール
「拡張機能」のところで検索窓に「Live Sass Compiler」を入れて探して、「インストール」を押して導入完了。
↓
初期設定だとこんな風にコンパイル生成されます
編集ファイル（SCSS）と同階層にCSSファイルが書き出される仕組みになっています。
└ … このファイルを編集する
└ … 同じ階層に生成されることになる
とりあえず編集ファイルと同じ階層でもいいやという人はこのままでOKです。
settings.json 設定方法
違う階層へCSSを書き出したい場合
例えば、私の場合は下記のような階層で、書き出しを希望。
└
└ … このファイルを編集する
└
└ … 同階層ではなく、cssというフォルダ内に書き出されて欲しい…
別階層に書き出したい場合は、下記のようにsettings.jsonに追加しました。
※settings.jsonは、拡張機能「Live Sass Compiler」の歯車マークを開くと編集リンクがあります。
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css/"
}
]savePathにある~/../という部分は、編集scssファイルから見た、相対パス指定。
上記の書き方だと、scssフォルダ内のscssファイルから見て、一個上にあがったcssフォルダが指定されるという意味です。(チルダ~をつけるのがミソ)
CSSマップがいらない場合の指定
CSSマップの出力もいらないので下記を設定します。
"liveSassCompile.settings.generateMap": false不便な点：フォルタごと監視できません
このコンパイル方法だけだと、フォルダごと監視ができません。（あくまでファイル単位）
用途別に分割されたscssファイル（パーシャル）の数が多くなると（例：_vars.scss,_colors.scss等）全て自動コンパイルされたほうが圧倒的に楽だとは思います。
私はこれまで、WindowsにRubyを自分で入れてターミナル立ち上げて、start.batファイルを作り、フォルダごと監視(watch)できる方法でコンパイルしてきました。
でも、ちょうど出産のため仕事の最前線を数年離れていた間に、Ruby-Sassが2019年に終了してたということに気づいてびっくり。今はDart Sassなんですね～
現在はDart Sassが主流で、watchをかけるにはNode.js環境が必要です。
ターミナル操作に慣れていない方には、後述のGUIツール（Prepros）を使う方法もおすすめです。
ターミナルの真っ黒画面であれこれするのに慣れていないデザイナー・コーダーも多いと思います。
私自身もNodeとかReactなどの真っ黒画面でコマンドぽちぽちするのは「実体」が見えない感がして苦手💦
そんな方は、「実体」が見えやすいGUIソフトのPreprosを利用したりするのもラクかもしれません。
GUIでフォルダごと監視できるのでパーシャルが多い場合に便利！
↓
よくあるエラーと対処法
「インストールしたのにコンパイルされない」「エラーが出た」というときは以下を確認してみてください。
コンパイルが走らない・ボタンが反応しない
SCSSファイルを開いた状態でボタンを押しているか確認してください。
Live Sass Compilerは「現在開いているファイル」を対象にコンパイルします。別のファイルを開いた状態だと反応しないことがあります。
また、ファイルの拡張子が .scss になっているかも確認してください。.sass（インデント記法）の場合は別途設定が必要です。
「Deprecated」の警告が大量に出る
LibSassからDart Sassへの移行に伴い、古い記法に対して警告が出るようになっています。エラーではなく警告なので、コンパイル自体は動きます。ただし将来的には使えなくなる記法なので、時間があるときに修正しておくと安心です。よく出る警告と対処法は後述します。
出力先フォルダが存在しないとエラーになる
settings.jsonで出力先に指定したフォルダが存在しない場合、コンパイルに失敗します。先にフォルダを手動で作成してから再度試してみてください。
LibSassとDart Sassの違い・移行について
Live Sass Compilerは現在、Dart Sassを採用しています（旧バージョンはLibSassでした）。ほとんどの書き方は共通ですが、一部の古い記法が非推奨になっています。
@import → @use / @forward に変更推奨
// 旧記法（LibSass・非推奨）
@import 'variables';
// 新記法（Dart Sass・推奨）
@use 'variables' as *;@importは現時点では動作しますが、将来的に廃止予定です。
新規プロジェクトでは@useを使うのがおすすめです。
/ による除算 → math.div() に変更推奨
// 旧記法（非推奨）
width: 100px / 2;
// 新記法（推奨）
@use 'sass:math';
width: math.div(100px, 2);既存のコードで警告が出ていても、すぐに壊れるわけではありません。
新しく書くコードから順次対応していくのが現実的です。
- 新規プロジェクト：最初からDart Sassの記法で書くのがおすすめ
- 既存プロジェクト：警告が出ていても動いているなら、急いで直す必要はなし。リファクタリングのタイミングで少しずつ対応でOK
まとめ
VS Codeの拡張機能「Live Sass Compiler」を使えば、npm環境を用意しなくても手軽にSCSSのコンパイルが始められます。
settings.jsonの設定を少し変えるだけで保存先の変更やマップファイルの出力停止もできるので、まずはこの方法から試してみるのがおすすめです。
パーシャルファイルが増えてきてフォルダごとの監視が必要になってきたら、そのタイミングでnpm環境やPreprosへの移行を検討するのがちょうど良いと思います。「まず動かしてみる」を最優先に、自分のワークフローに合わせて少しずつ環境を整えていきましょう！
この記事を書いた人
パリスタデザイン事務所のWebデザイナー・フロントエンドエンジニア。
WordPress構築・カスタマイズを中心に、CMS設計・構築や情報設計を得意としています。
AIやWeb技術、PC/ガジェットを活用しながら、「無理なく続く仕組みづくり」や実務に役立つ知見を発信しています。
