WebStorm 2026.1 Help

Compass アプリケーションの Sass および SCSS

WebStorm の Compass サポートを使うと、Compass アプリケーション内の Sass または SCSS スタイルシートが自動的に CSS にコンパイルされます。

始める前に

  1. Ruby をダウンロードしてインストールします(英語)。

  2. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの マーケットプレース タブに Compass プラグインをインストールして有効にします。

  3. 設定で File Watchers プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに File Watchers と入力します。 プラグインの詳細については、 プラグインの管理を参照してください。

Compass のインストール

  • 組み込み ターミナル (Alt+F12) で次のように入力します。

    gem install compass

    Compass は、Ruby 実行ファイルと gem.bat ファイルが格納されているフォルダーにインストールされます。

新しい Compass アプリケーションの作成

Compass アプリケーションがまだない場合は、新規作成するか、空の WebStorm プロジェクトに Compass サポートを追加できます。 いずれの場合も、 conf.rb 構成ファイルが生成されます。

  • 組み込み ターミナル (Alt+F12) で次のように入力します。

    compass create <the name of the application to be created>

  • プロジェクトの作成の説明に従って空の WebStorm プロジェクトを作成し、埋め込み ターミナル （Alt+F12 ）を開いて、次のように入力します：

    cd <application folder> compass init

アプリケーションで Compass 対応のサポートをアクティブ化する

  1. .sass または .scss ファイルを開く、 @import 'compass' ステートメントの横にある赤いバルブをクリックするか Alt+Enter を押してから、候補リストから Compass の設定 を選択します。

  2. Compass サポートを有効化 チェックボックスを選択し、Compass 実行ファイルと conf.rb 構成ファイルへのパスを指定します。

既存の Compass アプリケーションから開始する

すでにマシン上にあるアプリケーションソースを開く

  • ようこそ 画面で 開く をクリックするか、メインメニューから ファイル | オープン を選択します。 開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースをチェックアウト

  1. ようこそ 画面で リポジトリのクローン をクリックします。

    あるいは、メインメニューから ファイル｜新規｜バージョン管理からプロジェクト…、 Git｜クローン…、 VCS | バージョン管理から取得​ を選択します。

    メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。 例: Mercurial または Perforce。

  2. 表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。 詳細については、 プロジェクトをチェックアウトする（クローン） を参照してください。

Sass と SCSS のコンパイル

コードを自動的にコンパイルするには、コンパイラーをインストールし、ファイルへの変更を追跡してコンパイラーを実行する Compass Sass または Compass SCSS File Watcher を構成する必要があります。

ファイルを開くと、WebStorm は現在のプロジェクトで適用可能な File Watcher が存在するかを確認します。 そのような File Watcher が構成されていて無効な場合、WebStorm は設定済みの File Watcher について通知し、有効化を提案するポップアップを表示します。

現在のプロジェクトで該当する File Watcher が構成されていて有効な場合、WebStorm は 新しいウォッチャーダイアログで指定されたイベント発生時に自動的にコンパイラーを開始します。

  • 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。

  • 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスがオフの場合、保存時（ファイル | すべて保存、 Ctrl+S ）または WebStorm からフォーカスを移動したとき（フレーム非アクティブ化時）に File Watcher が開始されます。

詳細は File Watchers をご覧ください。

WebStorm は生成した出力を別ファイルとして作成します。 ファイルの名前はソース Sass または SCSS ファイルで、拡張子は .css です。 生成されたファイルの場所は、 リフレッシュする出力パス フィールドの 新規ウォッチャーダイアログ で定義されます。 しかし、 プロジェクトツリー では、それらは現在ノードとして表示されているソースファイルに表示されます。

File Watcher を作成する

  1. 設定 ダイアログ (Ctrl+Alt+S) で、 ツール の File Watchers をクリックします。 開く File Watchers ページには、構成済みのファイルウォッチャーのリストが表示されます。

  2. 追加ボタン をクリックするか、 Alt+Insert を押します。 使用するツールに応じて、リストから定義済みテンプレート compass sass または compass scss を選択します。 新規ウォッチャーダイアログが開きます。

  3. プログラム フィールドで、実行可能ファイルへのパスを指定します。

    • Windows 用 compass.bat

    • Unix 用 compass および macOS

  4. 引数 フィールドに、使用するオペレーティングシステムに応じて、次のいずれかを入力します。

    • ディレクトリ全体を処理する compile $UnixSeparators($ProjectFileDir$)$

    • 1 つのファイルを処理する compile $UnixSeparators($FilePath$)$

    • ディレクトリ全体を処理する compile $ProjectFileDir$

    • 1 つのファイルを処理する compile $ProjectFileDir$ $FilePath$

    • ディレクトリ全体を処理する compile $ProjectFileDir$

    • 1 つのファイルを処理する compile $ProjectFileDir$ $FilePath$

  5. File Watchers に記載されている手順に従って進めてください。

2026 年 6 月 8 日
Sass、SCSS、Less、PostCSSStylelint