Sass、SCSS、Less、PostCSS

FileWatcher をトリガーするアクションを変更する

プロジェクトが手動（ファイル | すべて保存 または Ctrl+S ）または自動で保存されるとすぐに、File Watcher が起動し、トランスパイラーを起動します。

通常、フォーカスを IntelliJ IDEA から移動すると (フレームの非アクティブ化時に)、コードが自動的に保存されます。 File Watchers では、File Watcher のスコープからファイルを編集するときにも自動保存が実行されます。 その結果、入力中は常にトランスパイラが実行され、パフォーマンスの問題が発生する可能性があります。 この問題を解決するには、編集したファイルの自動保存を抑制します。

Ctrl+Alt+S を押して設定を開き、 ツール | File Watchers を選択します。 必要な File Watcher（この例では SCSS ）を選択し、ツールバーの をクリックします。 ファイルウォッチャーの編集 ダイアログで、 拡張オプション 領域を展開し、 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにします。

デフォルトでは、File Watcher は、そのスコープ内のファイルが IntelliJ IDEA の外部から編集された場合でも起動します。 この動作を無効にして、内部で編集するときにのみファイルをトランスパイルするには、 外部の変更でウォッチャーをトリガーする チェックボックスをオフにします。

スコープを変更する

デフォルトで、IntelliJ IDEA はプロジェクト全体の .scss 拡張機能を持つすべてのファイルの変更を監視します。 これはこの例で機能します。 ただし、例えばコミットされていない変更のみを処理するようスコープを変更できます。 大規模なプロジェクトでは時間を節約できます。

Ctrl+Alt+S を押して設定を開き、 ツール | File Watchers を選択します。 必要な File Watcher（この例では SCSS ）を選択し、ツールバーの をクリックします。 ファイルウォッチャーの編集 ダイアログで、リストから該当するスコープを選択します。 詳しくは スコープとファイルカラー を参照してください。

カスタム出力場所

デフォルトでは、生成された .css と .css.map ファイルは元のファイルがあるフォルダーに保存され、 プロジェクト ツールウィンドウ（Alt+1 ）にその子として表示されます。 このデフォルトの動作を変更して、生成されたすべての .css および .css.map ファイルを別のフォルダーに保存することができます。

簡単なケースから始めましょう。 プロジェクトルートに custom_output.scss ファイルがあるとします。

custom_output.scss を編集してみましょう。例えば、6 行目の fill-opacity: abs(50); を fill-opacity: abs(60); に置き換えます。 デフォルトの File Watcher 構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、 custom_output.scss の子として表示されます。

すべての出力を別のフォルダー（たとえば、 css ）に保存すると便利です。 css フォルダーを出力場所として使用してカスタム SCSS_custom_output ファイルウォッチャーを作成しましょう。

Ctrl+Alt+S を押して設定を開き、 ツール | File Watchers を選択します。 そして、 上記の手順に従ってSCSS File Watcher を作成します。

デフォルト設定を次のように更新します。

• 引数 フィールドに次のように入力します：

  $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css

• リフレッシュする出力パス フィールドに次のように入力します：

  $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

新しいファイルウォッチャーを保存し、有効になっていることを確認します。

ここで、たとえば custom_output.scss を編集する場合、6 行目の fill-opacity: abs(50); を fill-opacity: abs(60); に置き換えると、IntelliJ IDEA は css フォルダーを作成し、生成された custom_output.css ファイルと custom_output.css.map ファイルをそのフォルダーに保存します。

カスタム出力場所: 元のフォルダー構造を保持する

次に、 .scss ファイルがフォルダー構造に格納されている例を考えてみましょう。例えば：

デフォルトの File Watcher では、生成されたファイルは元の .scss ファイルの隣に保存されます。

上記のようにカスタム File Watcher を使用すると、生成されたすべてのファイルが同じ css フォルダーに保存されます。

IntelliJ IDEA でフォルダー構造を保持するには、別のカスタム File Watcher を作成しましょう。

Ctrl+Alt+S を押して設定を開き、 ツール | File Watchers を選択します。 そして、 上記の手順に従ってSCSS File Watcher を作成します。

デフォルト設定を次のように更新します。

• 引数 フィールドに次のように入力します：

  $FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css

• リフレッシュする出力パス フィールドに次のように入力します：

  $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map

新しいファイルウォッチャーを保存し、有効になっていることを確認します。

ここで、 custom_output_body.scss 、 custom_output_header.scss 、 custom_output_footer.scss を編集すると、IntelliJ IDEA は、 styles_structured の構造を保持するサブフォルダーの構造を持つ css フォルダーを作成します。

FileWatcher をトリガーするアクションを変更する

プロジェクトが手動（ファイル | すべて保存 または Ctrl+S ）または自動で保存されるとすぐに、File Watcher が起動し、トランスパイラーを起動します。

通常、フォーカスを IntelliJ IDEA から移動すると (フレームの非アクティブ化時に)、コードが自動的に保存されます。 File Watchers では、File Watcher のスコープからファイルを編集するときにも自動保存が実行されます。 その結果、入力中は常にトランスパイラが実行され、パフォーマンスの問題が発生する可能性があります。 この問題を解決するには、編集したファイルの自動保存を抑制します。

Ctrl+Alt+S を押して設定を開き、 ツール | File Watchers を選択します。 必要な File Watcher（この例では Less ）を選択し、ツールバーの をクリックします。 ファイルウォッチャーの編集 ダイアログで、 拡張オプション 領域を展開し、 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにします。

スコープを変更する

デフォルトで、IntelliJ IDEA はプロジェクト全体の .scss 拡張機能を持つすべてのファイルの変更を監視します。 これはこの例で機能します。 ただし、例えばコミットされていない変更のみを処理するようスコープを変更できます。 大規模なプロジェクトでは時間を節約できます。

Ctrl+Alt+S を押して設定を開き、 ツール | File Watchers を選択します。 必要な File Watcher（この例では Less ）を選択し、ツールバーの をクリックします。 ファイルウォッチャーの編集 ダイアログで、リストから該当するスコープを選択します。 詳しくは スコープとファイルカラー を参照してください。

カスタム出力場所

デフォルトでは、生成された .css と .css.map ファイルは元のファイルがあるフォルダーに保存され、 プロジェクト ツールウィンドウ（Alt+1 ）にその子として表示されます。 このデフォルトの動作を変更して、生成されたすべての .css および .css.map ファイルを別のフォルダーに保存することができます。

簡単なケースから始めましょう。 プロジェクトルートに custom_output.less ファイルがあるとします。

たとえば、 custom_output.less を編集して、1 行目の @color の値を変更します。 デフォルトの File Watcher 構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、 custom_output.less の子として表示されます。

すべての出力を別のフォルダー（たとえば、 css ）に保存すると便利です。 css フォルダーを出力場所として使用してカスタム Less_custom_output ファイルウォッチャーを作成しましょう。

Ctrl+Alt+S を押して設定を開き、 ツール | File Watchers を選択します。 そして、 上記の手順に従ってLess と File Watcher を作成します。

デフォルト設定を次のように更新します。

• 引数 フィールドに次のように入力します：

  $FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-map

• リフレッシュする出力パス フィールドに次のように入力します：

  $ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

新しいファイルウォッチャーを保存し、有効になっていることを確認します。

ここで、たとえば custom_output.less を編集して 1 行目の @color の値を変更すると、IntelliJ IDEA は css フォルダーを作成し、生成された custom_output.css および custom_output.css.map ファイルをそこに格納します。

カスタム出力場所: 元のフォルダー構造を保持する

次に、 .less ファイルがフォルダー構造に格納されている例を考えてみましょう。例えば：

デフォルトの File Watcher では、生成されたファイルは元の .less ファイルの隣に保存されます。

上記のようにカスタム File Watcher を使用すると、生成されたすべてのファイルが同じ css フォルダーに保存されます。

IntelliJ IDEA でフォルダー構造を保持するには、別のカスタム File Watcher を作成しましょう。

Ctrl+Alt+S を押して設定を開き、 ツール | File Watchers を選択します。 そして、 上記の手順に従ってLess と File Watcher を作成します。

デフォルト設定を次のように更新します。

• 引数 フィールドに次のように入力します：

  $FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-map

• リフレッシュする出力パス フィールドに次のように入力します：

  $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map

新しいファイルウォッチャーを保存し、有効になっていることを確認します。

ここで、 custom_output_body.less 、 custom_output_header.less 、 custom_output_footer.less を編集すると、IntelliJ IDEA は、 styles_structured の構造を保持するサブフォルダーの構造を持つ css フォルダーを作成します。