IntelliJ IDEA 2020.3 ヘルプ

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

IntelliJ IDEA の Compass のサポート(英語)を使用すると、Compass アプリケーションの Sass または SCSS スタイルシートが自動的に CSS にコンパイルされます。

始める前に

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

  2. JetBrains リポジトリからプラグインをインストールする説明に従って、設定 / 環境設定 | プラグインページで Compass とファイルウォッチャープラグインをインストールして有効にします。

Compass のインストール

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

    gem install compass

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

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

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

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

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

  • 空の IntelliJ IDEA プロジェクトを作成し、埋め込まれたターミナルAlt+F12)を開いて、次のように入力します。

    cd <application folder> compass init

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

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

  2. コンパスのサポートを使用可能にするチェックボックスを選択し、Compass 実行ファイルと conf.rb 構成ファイルへのパスを指定します。

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

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

  • ウェルカム画面で開くまたはインポートをクリックするか、メインメニューからファイル | 開くを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースを確認してください

  1. ウェルカム画面で VCS から取得をクリックするか、メインメニューから VCS | バージョン管理から取得を選択します。

  2. 呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

Sass と SCSS のコンパイル

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

ファイルを開くと、IntelliJ IDEA は、該当するファイル監視が現在のプロジェクトで使用可能かどうかを確認します。そのようなファイル監視が構成されているが無効になっている場合、IntelliJ IDEA は、構成されたファイル監視について通知し、有効にすることを提案するポップアップを表示します。

現在のプロジェクトで該当するファイル監視が構成されて有効になっている場合、IntelliJ IDEA は新規ウォッチャーダイアログで指定されたイベントで自動的にコンパイラーを起動します。

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

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

ファイル監視の詳細を参照してください。

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

ファイルウォッチャーを作成する

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、ツールファイル監視をクリックします。開くファイルウォッチャーページには、すでに構成されているファイル監視のリストが表示されます。

  2. Add button をクリックするか、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. ファイル監視に記載されている手順に従います。

関連ページ:

プラグインを管理する

このサイトのメニューやアクション名表記は日本語です。IntelliJ IDEA を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しい...

外部ツール

サードパーティのアプリケーションを外部ツールとして定義し、IntelliJ IDEA から実行できます。IntelliJ IDEA を使用すると、プロジェクトから外部ツールにコンテキスト情報をコマンドライン引数(現在選択されているファイルやプロジェクトのソースパスなど)として渡し、ツールによって生成された出力を表示し、実行前にツールを起動するように構成できます。/ debug 構成など。IntelliJ IDEA に追加できる外部ツールにはいくつかの種類があります。ローカルツールは、コンピューター...

新規ウォッチャーダイアログ

ファイルウォッチャーページの追加、または編集、ボタンをクリックするとダイアログが開きます。ダイアログを使用して、事前定義済み IntelliJ IDEA File Watcher テンプレートに基づいてプロジェクトファイル監視を作成するか、既存のプロジェクトファイル監視を編集します。各テンプレートには、選択したツールに最適な設定が含まれています。ほとんどの場合、必要なのは、ツールの実行可能ファイルへのパスを指定することだけです。名前:「名前」フィールドに、ファイル監視の名前を入力します。デフォ...

ファイル監視

ファイル監視は IntelliJ IDEA ツールであり、IDE でファイルを変更または保存するときに、コンパイラー、フォーマッタ、リンターなどのコマンドラインツールを自動的に実行できます。ファイルウォッチャーには、2 つの専用コードインスペクションがあります。ファイル監視使用可能インスペクションは、あらかじめ定義されたファイル監視が適用されるすべてのファイルで実行されます。プロジェクトに関連するファイル監視が設定されていない場合、IntelliJ IDEA はファイルウォッチャーを追加すること...