JetBrains Rider 2026.1 Help

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

JetBrains Rider の Compass サポートにより、Compass アプリケーション内の Sass や SCSS スタイルシートが自動的に CSS にコンパイルされます。

始める前に

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

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

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

Compass のインストール

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

    gem install compass

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

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

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

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

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

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

    または、メインメニューから Git ｜ クローン… または VCS | バージョン管理から取得 を選択します。

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

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

Sass と SCSS のコンパイル

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

ファイルを開くと、JetBrains Rider は現在のプロジェクトで該当するファイルウォッチャーが利用可能かどうかを確認します。 そのようなファイルウォッチャーが構成されていて無効の場合、JetBrains Rider は構成済みのファイルウォッチャーについて案内し、有効化を提案するポップアップを表示します。

該当するファイルウォッチャーが現在のプロジェクトで構成および有効化されている場合、JetBrains Rider は 新規ウォッチャーダイアログ で指定されたイベントが発生すると自動的にコンパイラーを起動します。

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

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

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

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 月 12 日
Sass、SCSS、Less、PostCSSStylelint