【IntelliJ IDEA】.cssファイルでPost-CSS記法を使うときの設定

IntelliJ IDEAでPost-cssの記法を.cssファイルで使いたいとき標準の設定だとCSSのフォーマットが適用されるためネストで警告が出たり、インデントの調整が面倒だったりします。
.cssのファイルでPost-cssの記法を使えるようにするためのIntelliJ IDEA設定方法を紹介します。

対応可能なPost-CSS記法

今回紹介する方法で対応可能なPost-CSSの記法は下記です。

• postcss-custom-properties
• postcss-apply
• postcss-custom-media
• postcss-media-minmax
• postcss-custom-selectors
• postcss-nesting
• postcss-nested

設定手順

1. IntelliJの設定からPluginsを開く
2. Marketplaceタブにしてpostcssで検索
3. PostCSSというプラグインが表示されるのでインストール
   
4. 設定を適用するディレクトリを指定
   1. 設定 > Languafes & Frameworks > Style Sheets > Dialects
   2. +マークを押して適用させるディレクトリのPathを入力
   3. CSS DialectでPostCSSを選択
   4. ApplyまたはOKをクリック