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でフォルダごと監視できるのでパーシャルが多い場合に便利！
↓
まとめ
VS Codeの拡張機能「Live Sass Compiler」を使えば、npm環境を用意しなくても手軽にSCSSのコンパイルが始められます。
settings.jsonの設定を少し変えるだけで保存先の変更やマップファイルの出力停止もできるので、まずはこの方法から試してみるのがおすすめです。
パーシャルファイルが増えてきてフォルダごとの監視が必要になってきたら、そのタイミングでnpm環境やPreprosへの移行を検討するのがちょうど良いと思います。「まず動かしてみる」を最優先に、自分のワークフローに合わせて少しずつ環境を整えていきましょう。
この記事を書いた人
パリスタデザイン事務所のWebデザイナー。
得意分野は、使い勝手についてきめ細やかに考えられたCMS設計・構築。
3児の母でもあります。ゲーム・パソコンが趣味。
好きが高じてEC事業部でPCや自作PCパーツ・ゲーミング関連グッズの販売も行っています。
お仕事のご依頼はこちらまで
パリスタデザイン事務所は、WordPressの構築/カスタマイズを得意としています。
Web制作に関するお仕事は、パリスタデザイン事務所までお気軽にお問い合わせください。
