【VS Code】Live Sass Compilerで特定のフォルダ・ファイルを除外する方法｜設定が反映されない・重い時の対処法

VS Codeの拡張機能「Live Sass Compiler」を使っていると、「コンパイルが遅くて動作が重い」「コンパイル不要な外部ライブラリ（Bootstrapなど）まで出力されてしまう」といった悩みに直面することがあります。

これらの問題は、特定のフォルダやファイルをコンパイルの監視対象から「除外」することで劇的に改善されます。

この記事では、Live Sass Compilerで不要なファイルを除外する具体的な設定手順から、設定したのに除外されない（効かない）場合のトラブルシューティングまでを分かりやすく解説します。

※Live Sass Compilerのインストールはこちら

Live Sass Compilerで特定のフォルダを除外する設定手順

特定のフォルダを監視対象から外すには、VS Codeの設定ファイルである settings.json に追記を行います。 個人的な環境だけでなく、チーム開発でも設定を共有できるよう、今回はワークスペース設定（プロジェクト限定の設定）で行う方法を推奨します。

ステップ1：プロジェクト内に .vscode フォルダを作成する

1. VS Codeで対象のプロジェクト（フォルダ）を開きます。
2. プロジェクトの一番上の階層（ルートディレクトリ）に、.vscode という名前の新しいフォルダを作成します。
3. その中に settings.json というファイルを作成します。

ステップ2：excludeList に除外パスを記述する

作成した settings.json に、以下のコードを記述します。すでに他の設定が書かれている場合は、波括弧 {} の中に追記してください。

{
  "liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    "**/vendor/**",
    "**/src/assets/scss/ignored-folder/**"
  ]
}

上記の例では、node_modules フォルダ、vendor フォルダ、そして特定の ignored-folder を丸ごとコンパイルの対象から除外しています。ご自身のプロジェクト構造に合わせてパスを書き換えてください。

記述における重要な注意点（ワイルドカードの意味）

パスの書き方には独自のルールがあります。アスタリスク（*）の使い方を間違えると正常に機能しません。

• /（冒頭）：プロジェクト内の「任意の階層」を意味します。これがないと、ルート直下にあるフォルダしか認識されません。
• /（末尾）：そのフォルダ内の「すべてのファイルとサブフォルダ」を対象とします。これを付け忘れると、フォルダ自体は除外されても中のファイルが監視対象に残ってしまいます。

特定の「ファイル」だけを除外したい場合

フォルダ丸ごとではなく、「特定のSass/SCSSファイルだけ」を除外したい場合は、以下のようにファイル名を直接指定します。

{
  "liveSassCompile.settings.excludeList": [
    "**/src/scss/reset.scss",
    "**/src/scss/config.scss"
  ]
}

※ただし、Sassの仕様上、ファイル名の先頭にアンダースコア（_）がついているファイル（例：_variables.scss）は、自動的にパーシャル（部分ファイル）とみなされ、単体ではコンパイルされません。

そのため、わざわざ excludeList に記述する必要はありません。

設定が反映されない・効かない時のチェックリスト

設定を書いたのに除外されない場合は、以下の3点を確認してください。

1. JSONの構文エラー（カンマ忘れ）

settings.json 内に複数の設定を書いている場合、行末のカンマ（,）を忘れると構文エラーとなり、設定全体が無効化されます。ファイル内で赤線のエラーが出ていないか確認してください。

2. パス区切り文字のミス

Windows環境であっても、settings.json 内でのパス区切り文字はバックスラッシュ（\）ではなく、スラッシュ（/）を使用するのが原則です。

3. プロセスの再起動

設定を変更した直後は、古い監視プロセスが動いたままになっていることがあります。VS Code下部のステータスバーにある 「Watching…」 を一度クリックして監視を停止し、再度 「Watch Sass」 をクリックして再起動してください。

なぜ除外設定が必要なのか？（開発効率とチーム共有）

わざわざ除外設定を行う最大の理由は、開発環境のパフォーマンス低下を防ぐためです。

例えば、UIコンポーネントライブラリや他社製の巨大なCSS資産をプロジェクトに含めている場合、ファイルを保存するたびに数千行のコードが再コンパイルされます。これによりブラウザのプレビュー更新にラグが発生し、コーディングのテンポが悪化します。

今回紹介した .vscode/settings.json を使用したワークスペース設定は、Gitなどのバージョン管理でチーム内に共有できます。新しくプロジェクトに参画したメンバーも、最初から「不要なコンパイルが発生しない快適な環境」で作業を始めることが可能になります。

不要なファイルはしっかり除外して、サクサク動く快適なコーディング環境を構築しましょう！