Next.jsでPostCSSを設定する方法
デフォルトの動作
Next.jsは組み込みのCSSサポートのためにPostCSSを使用してCSSをコンパイルします。
何も設定せずに、Next.jsは以下の変換を行ってCSSをコンパイルします:
- AutoprefixerはCSSルールにベンダープレフィックスを自動的に追加します(IE11までさかのぼって)。
- クロスブラウザのFlexboxのバグは仕様通りに動作するように修正されます。
- 新しいCSS機能はInternet Explorer 11との互換性のために自動的にコンパイルされます:
デフォルトでは、CSS Gridとカスタムプロパティ(CSS変数)はIE11サポートのためにコンパイルされません。
IE11用にCSS Gridレイアウトをコンパイルするには、CSSファイルの先頭に次のコメントを配置できます:
/* autoprefixer grid: autoplace */
また、以下に示す設定(折りたたまれています)を使用してautoprefixerを設定することで、プロジェクト全体でCSS GridレイアウトのIE11サポートを有効にすることもできます。 詳細については、以下の"プラグインのカスタマイズ"を参照してください。
CSS Gridレイアウトを有効にする設定を表示するにはクリックしてください
{
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009",
"grid": "autoplace"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}
CSS変数は安全にコンパイルすることができないため、コンパイルされません。 変数を使用する必要がある場合は、Sassによってコンパイル時に置き換えられるSass変数のようなものを検討してください。
ターゲットブラウザのカスタマイズ
Next.jsでは、Browserslistを通じて(AutoprefixerやコンパイルされるCSS機能の)ターゲットブラウザを設定できます。
browserslistをカスタマイズするには、package.json
に以下のようにbrowserslist
キーを作成します:
{
"browserslist": [">0.3%", "not dead", "not op_mini all"]
}
browsersl.istツールを使用して、ターゲットにしているブラウザを視覚化できます。
CSSモジュール
CSSモジュールをサポートするための設定は必要ありません。ファイルのCSSモジュールを有効にするには、ファイルの拡張子を.module.css
に変更します。
Next.jsのCSSモジュールサポートについての詳細はこちらをご覧ください。
プラグインのカスタマイズ
警告: カスタムPostCSS設定ファイルを定義すると、Next.jsはデフォルトの動作を完全に無効化します。 コンパイルが必要なすべての機能(Autoprefixerを含む)を手動で設定してください。 また、カスタム設定に含まれるプラグインを手動でインストールする必要があります(例:
npm install postcss-flexbugs-fixes postcss-preset-env
)。
PostCSS設定をカスタマイズするには、プロジェクトのルートにpostcss.config.json
ファイルを作成します。
これはNext.jsで使用されるデフォルト設定です:
{
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}
補足: Next.jsでは、ファイル名を
.postcssrc.json
とすることも、package.json
のpostcss
キーから読み込むこともできます。
環境に基づいてプラグインを条件付きで含めたい場合に便利なpostcss.config.js
ファイルを使用してPostCSSを設定することも可能です:
module.exports = {
plugins:
process.env.NODE_ENV === 'production'
? [
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
features: {
'custom-properties': false,
},
},
],
]
: [
// 開発環境では変換なし
],
}
補足: Next.jsでは、ファイル名を
.postcssrc.js
とすることもできます。
PostCSSプラグインをインポートするために**require()
を使用しないでください**。プラグインは文字列として提供する必要があります。
補足: 同じプロジェクト内の他のNext.js以外のツールをサポートするために
postcss.config.js
が必要な場合は、代わりに相互運用可能なオブジェクトベースの形式を使用する必要があります:module.exports = { plugins: { 'postcss-flexbugs-fixes': {}, 'postcss-preset-env': { autoprefixer: { flexbox: 'no-2009', }, stage: 3, features: { 'custom-properties': false, }, }, }, }