Live Sass CompilerはSassをコンパイルするVSCodeの拡張機能ですが、出力先の設定に少し癖があります。そこで本記事ではLive Sass Compilerの基本的な使い方から出力先設定の図解まで準備して、丁寧に解説していきます。
私はSassコンパイルは基本WebpackやらGulpなどその時の開発環境に使われているものでコンパイルしていますが、軽いものなら「Live Sass Compiler」を用いますし、初学者の方の最初のSass導入にもおすすめだと思っています。
VSCodeや上位互換のCursorをお使いの方、コンパイルされないとお悩みの方は、是非参考にしてください。
特にディレクトリ構成と出力先設定は、Web制作を独学していると詰まりやすい場面です。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
2025年には「8日以内提出」という納期と「修正10箇所以内」という品質項目が課された、模擬案件編も追加
コーディングに自信をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
Live Sass Compilerのインストールと使い方
まずはVSCodeの左側の「拡張機能アイコン」をクリックし、検索欄にlive sassと入力し、候補に出てきたLive Sass Compilerをクリックしてください。
Live Sass Compilerは２つありますが、Glenn Marks氏のLive Sass Compilerであることを確認し、インストールしてください。
前のものはDart Sassに未対応だったものが、今回利用する派生版はDart Sassにも対応したものになったということです。
インストール後に下に「Watch Sass」というテキストが出現したかと思うので、これをクリックすることで、Sassファイルを保存した時に、自動でCSSファイルにコンパイルされるようになります。
コンパイル状況やエラーに関しては下のターミナルに出力されるので、見てみて下さい。
Live Sass Compilerのよくあるエラーとして、sassファイルだけVSCodeで開いてもコンパイルできません。
必ずsassファイルが入ったプロジェクトフォルダごとVSCodeで開くようにお願いします。
Live Sass Compilerの初期設定
インストール後、歯車マークから「拡張機能の設定」をクリック。
その後「setting.jsonで編集」をクリック。
jsonファイルの編集ができるようになるので、以下のコードをコピペしてください。
"liveSassCompile.settings.formats": [
{
"format": "expanded", // 出力されるCSSの形式。"expanded"は通常の読みやすい形式。"compressed"は圧縮された形式。
"extensionName": ".css", // 出力されるファイルの拡張子。通常は.css。
"savePath": null // .scssファイルからの相対的な出力先のフォルダを指定。nullだと同階層、'/'はルートディレクトリを意味する。
}
],
"liveSassCompile.settings.autoprefix": [
"> 10%", // 全体のユーザーの10%以上が使用しているブラウザバージョンに対応
"last 2 versions" // 各ブラウザの最新2バージョンに対応
],
"liveSassCompile.settings.excludeList": [
".vscode/**" // .vscodeフォルダ内のすべてのファイルやサブフォルダをコンパイルから除外
],
"liveSassCompile.settings.generateMap": false, // ソースマップ(.map)ファイルの生成を無効にする。
"workbench.editor.untitled.hint": "hidden", // VS Codeの未命名エディタのヒントを非表示にする。
"liveSassCompile.settings.includeItems": [] // 特定のアイテムをコンパイルに含めるリスト。現在は空。この設定だと、Sassファイルと同階層にCSSファイルがコンパイルされます。
ここではソースマップ（Map）をfalseにしています。trueだとstyle.css.mapが出力されます。
ソースマップは検証ツールでCSSを見た時に、そのCSSがSassではどこに書かれているか教えてくれるものです。
開発中はtrueにしておき、本番アップロード時には不要なので含めないといった使い方をします。
ファイルが増えるので、デフォルトではfalseにしています。
jsonファイルを触る時に、始めと最後の｛ ｝は消さないようにお願いします。
また、最後のコンマについては、次に要素がない場合はコンマ無しで、次に要素があったり、足す場合はコンマが必要になります。
Live Sass Compilerの出力先のsavePath設定
さて、Live Sass Compilerを使う人が一番気になるのが「コンパイルされたCSSファイルの出力先の設定」でしょう。
例えば以下の設定だとSassファイルと同階層にCSSファイルがコンパイルされます。
"savePath": null
これは簡単ですね。
もし、違う階層にCSSファイルをコンパイルしたい場合はどうすればいいか具体例を図示します。
同階層のCSSフォルダ内にCSSファイルを出力したい場合
基本的に相対パス（~/）で設定することを前提に解説します。
以下のような「sassフォルダ内にsassファイルがあって、同階層のCSSフォルダに出力」したい場合は“savePath”: “~/../css/”とすればいいです。
別のフォルダのCSSフォルダ内にCSSファイルを出力したい場合
比較的しっかりしたプロジェクトだと、開発フォルダ（dev）とコンパイル先フォルダ（assets）が別れている場合が多いです。
以下の画像のような時は、“savePath”: “~/../../assets/css/”とすればいいです。
Live Sass Compilerがコンパイルされない時のチェックリスト
| チェック項目 | 内容 |
|---|---|
| 拡張機能が有効か | VSCode拡張機能で「Live Sass Compiler」が有効化されているか確認 |
| .scssが存在するか | ワークスペースにコンパイル対象の .scss ファイルがあるか |
| ファイル保存済みか | 変更後に保存（Ctrl/Cmd+S）しているか |
| 出力先設定 | settings.jsonのsavePathが正しく、存在&書込可か |
| Live Server併用 | 一旦停止して挙動を切り分け |
| 部分ファイルを直接開いてないか | _partial.scssは直接出力されない点を確認 |
| 対象ファイルを開いているか | サイドバー/エディタで対象 .scss をアクティブに |
| 記法エラー有無 | セミコロン/波括弧/ネスト等の文法エラーをLint/問題タブで確認 |
| 監視開始状態 | ステータスバーの「Watch Sass」開始 or コマンドパレットで開始 |
| 書き込み権限 | 出力フォルダが読み取り専用/ロック状態でないか |
| ワークスペースの信頼 | Workspace Trust が「完全に信頼」になっているか |
| includePaths設定 | liveSassCompile.settings.includePathsが不足していないか |
| 他拡張の干渉 | Prettier/ESLint/他Sass系拡張を一時無効化して切り分け |
| 拡張/VSCode更新 | Live Sass Compiler/VSCode を最新化、再インストールも検討 |
| モジュール解決 | @use/@forward/@import のパスや循環参照エラーがないか |
Live Sass Compilerの出力先設定に慣れよう!!
Live Sass Compilerはお手軽にSassをコンパイルできるので、是非マスターしておきたい拡張機能です。
私の出している「コーディング演習課題」でも中級課題以上では基本的にSassでコーディングしていただきますし、Web制作ロードマップでも途中からはSassの使用が前提になってきます。
まだ導入されていない方は、この機会に利用していただければと思います。
また、VSCodeに慣れたら、是非Cursorの導入を検討してください。今後は息をするようにAIを使ってコーディングできるコーダーと、そうでないコーダーの間にかなりの生産性の差が出てきます。
同時にChatGPTも使えるようにしておくといいですね。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。2025年も案件獲得や転職に成功した人が多数出ています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
しょーごログのコーディング課題後に、ニートから最大月収100万を稼げる用になった方のインタビュー記事も参考になるはずです。
ご寄付を頂けると今後の更新の励みになります！
