IntelliJ IDEA 2020.1ヘルプ

Sass、Less、およびSCSS

IntelliJ IDEAは、Sass(英語)Less(英語)、およびSCSS(英語)コードをCSS(英語)に変換するコンパイラーと統合します。IntelliJ IDEAでコンパイラーを使用するには、関連する事前定義済みテンプレートに基づいて、ファイル監視としてコンパイラーを構成する必要があります。

始める前に

  1. お使いのコンピューターにNode.js(英語)がインストールされていることを確認してください。

  2. リポジトリからプラグインをインストールする説明に従って、プラグインのページにファイル監視プラグインをインストールして有効にします。

Sass / SCSSのインストール

Lessのインストール

npmとYarnの説明に従って、lessパッケージをNode.jsとNPMページにインストールすることもできます。

コードをCSSにコンパイルする

コードを自動的にコンパイルするには、コンパイラーをIntelliJ IDEA ファイル監視として構成する必要があります。

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

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

  2. Add button をクリックするか、Alt+Insertを押します。使用するツールに応じて、リストからLessSass、またはSCSSの事前定義テンプレートを選択します。

  3. プログラムフィールドで、選択した事前定義テンプレートに応じてコンパイラアーカイブへのパスを指定します。

    • Less用のlessc

    • Sass / SCSS用のsass

    npmを使用して標準インストール手順を実行した場合、IntelliJ IDEAは必要なファイルそのものを特定し、自動的にフィールドに入力します。それ以外の場合は、パスを手動で入力するか、the Browse button をクリックして、表示されるダイアログでファイルの場所を選択します。

  4. ファイル監視に記載されている手順に従います。

コードのコンパイル

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

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

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

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

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

構文強調表示の構成

好みや習慣に応じて、Less / Sass / SCSS対応の構文強調表示を設定できます。

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、エディター | カラー・スキームの切り替え | Less / Sass / SCSSに移動します。

  2. 配色を選択するか、デフォルトから継承された強調表示設定を受け入れるか、または色とフォントの設定の説明に従ってカスタマイズします。

最終更新日: 2020年7月7日

関連ページ:

ファイル監視

ファイル監視は組み込みのIntelliJ IDEAツールで、IDEでファイルを変更または保存するときにコンパイラ、フォーマッタ、linterなどのコマンドラインツールを自動的に実行できます。ファイルウォッチャーには2つの専用コードインスペクションがあります。ファイル監視使用可能インスペクションは、あ...

外部ツール

スタンドアロンのサードパーティアプリケーションを外部ツールとして定義し、IntelliJ IDEAから実行できます。プロジェクトからコンテキスト情報をコマンドライン引数(たとえば、現在選択されているファイル、開いているファイル、プロジェクトのソースパスなど)として外部ツールに渡したり、ツールによって...

プラグインを管理する

プラグインはIntelliJ IDEAのコア機能を拡張します。彼ら:バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を...

プラグイン

macOSのこのページを使用してプラグインを管理します。プラグインリポジトリの閲覧、プラグインのインストール、削除、有効化、無効化、および更新を行います。主なコントロール:マーケットプレースこのタブを使用して、JetBrainsプラグインリポジトリからプラグインをブラウズしてインストールします。カス...

npmおよびYarn

IntelliJ IDEAはnpm、Yarn、およびYarn 2と統合されているため、IDE内から再利用可能なコードのパッケージをインストール、検索、アップグレード、および削除できます。Node.jsとNPMページは、パッケージを管理するための専用UIを提供します。もちろん、組み込みのターミナルのコ...

色とフォントの構成

開発者として、エディターのソースコード、検索結果、デバッガ情報、コンソールの入出力など、多くのテキストリソースを使用します。色とフォントスタイルは、このテキストの書式設定に使用され、一目で理解しやすくなります。IntelliJ IDEAは推奨する色とフォントを定義するカラースキームを使います。配色は...