︙

PostCSS

Examples

Tailwind CSS の例

Default Behavior

Next.js は PostCSS を使用して、その組み込みの CSS サポートのために CSS をコンパイルします。

設定無しですぐに、Next.js は次の変換を伴って CSS をコンパイルします：

Autoprefixer は自動的にベンダープレフィックスを CSS ルール(IE11 まで戻る)に追加します。
Cross-browser Flexbox bugs は、the spec のように動作するように修正されました。
新しい CSS の機能は、Internet Explorer 11 との互換性のために自動的にコンパイルされます：

default として、CSS Grid とCustom Properties (CSS 変数)は IE11 サポートのためにコンパイルされません。

CSS Grid Layout を IE11 用にコンパイルするには、CSS ファイルの先頭に次のコメントを記述できます：

/* autoprefixer grid: autoplace */

また、以下に示す設定(折りたたまれています)で autoprefixer を設定することにより、プロジェクト全体で" CSS Grid Layout " の IE11 サポートを有効にすることもできます。詳細情報は、下記の"Customizing Plugins"を参照してください。

Click to view the configuration to enable CSS Grid Layout

postcss.config.json

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009",
          "grid": "autoplace"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

CSS の変数は、安全に行うことができないためコンパイルされません。変数を使わなければならない場合は、Sass によってコンパイルされるSass の変数などを検討してみてください。

Customizing Target Browsers

Next.js は、Browserslist を通じて、target ブラウザ(Autoprefixer とコンパイルされた css 機能用)を設定することが可能です。

browserslist をカスタマイズするには、次のようにpackage.json内にbrowserslistキーを作成します：

package.json

{
  "browserslist": [">0.3%", "not dead", "not op_mini all"]
}

browsersl.ist ツールを使用して、どのブラウザを対象にしているかを視覚化できます。

CSS Modules

CSS Modules をサポートするための設定は不要です。ファイルに CSS Modules を有効にするには、ファイルの拡張子を.module.cssに変更してください。

あなたはNext.js' CSS Module support hereについてより詳しく学ぶことができます。

Customizing Plugins

警告: カスタムの PostCSS 設定ファイルを定義すると、 Next.js はdefault の動作を完全に無効化します。すべての必要な機能を、Autoprefixer を含む手動で設定してコンパイルすることを確認してください。あなたはまた、カスタム設定に含まれているプラグインを手動でインストールする必要があります。つまり、npm install postcss-flexbugs-fixes postcss-preset-env。

PostCSS の設定をカスタマイズするために、プロジェクトの root にpostcss.config.jsonファイルを作成してください。

これは、Next.js が使用する default 設定です：

postcss.config.json

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

Good to know: Next.js では、ファイルを .postcssrc.jsonという名前で保存したり、package.jsonのpostcssキーから読み込むことも可能です。

また、postcss.config.jsファイルを使って PostCSS を設定することも可能で、これは環境に基づいてプラグインを条件付きで含めたいときに便利です：

postcss.config.js

module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // No transformations in development
        ],
}

Good to know: Next.js は、ファイルに .postcssrc.js という名前を付けることも許可しています。

require()を使わないでください。''import' 'PostCSS'’のプラグイン。プラグインは文字列として提供する必要があります。

Good to know: あなたの postcss.config.js が同じプロジェクト内の他の非 Next.js ツールをサポートする必要がある場合、代わりに相互運用可能なオブジェクトベースの形式を使用しなければなりません：
module.exports = {
plugins: {
'postcss-flexbugs-fixes': {},
'postcss-preset-env': {
autoprefixer: {
flexbox: 'no-2009',
},
ステージ: 3,
機能: {
'custom-properties': false ,
},
},
},
}
`