IntelliJ IDEA 2019.1ヘルプ

Sass、Less、およびSCSS

IntelliJ IDEAは、Sass(英語)Less(英語)、およびSCSS(英語)コードをCSS(英語)に変換するコンパイラと統合されています。IntelliJ IDEAでコンパイラを使用するには、ファイル監視として設定する必要があります。サポートされているコンパイラごとに、IntelliJ IDEAには事前定義されたファイル監視テンプレートが用意されています。プロジェクトでコンパイラを実行するには、関連するテンプレートに基づいてプロジェクト固有のファイルウォッチャーを作成します。

始める前に

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

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

Sass / SCSSのインストール

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

    npm install -g sass

    Sass(英語)の公式Webサイトから詳細を学びましょう。

Lessのインストール

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

    npm install --global less

    Less(英語)の公式Webサイトから詳細を学びましょう。

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

オンザフライでコードをコンパイルするには、コンパイラをIntelliJ IDEA ファイル監視として設定する必要があります。

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

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

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

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

    • Less用のlessc.cmd

    • Sass / SCSS用のsass.cmd

    npmを使用して標準インストール手順を実行した場合、IntelliJ IDEAは必要なファイルそのものを特定し、自動的にフィールドに入力します。それ以外の場合は、パスを手動で入力するか、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. 配色を選択するか、デフォルトから継承された強調表示設定を受け入れるか、または色とフォントの設定の説明に従ってカスタマイズします。

最終更新日: 2019年6月20日

関連事項

関連ページ:

ファイル監視機能の使用

この機能は、Ultimateエディションでのみサポートされています。ファイル監視は組み込みのIntelliJ IDEAツールで、IDEでファイルを変更または保存するときにコンパイラ、フォーマッタ、linterなどのコマンドラインツールを自動的に実行できます。ファイルウォッチャーをゼロから構成するか、...

プラグインを管理する

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

プラグイン

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

npmおよびYarn

この機能は、Ultimateエディションでのみサポートされています。IntelliJ IDEAはnpmおよびYarnパッケージマネージャーと統合されているため、IDE内から再利用可能なコードのパッケージをインストール、検索、アップグレード、削除することができます。Node.jsとNPMページはパッケ...

色とフォントの設定

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