PostCSS

Standardverhalten

Next.js kompiliert CSS für seine integrierte CSS-Unterstützung mit PostCSS.

Ohne zusätzliche Konfiguration kompiliert Next.js CSS mit folgenden Transformationen:

• Autoprefixer fügt automatisch Vendor-Präfixe zu CSS-Regeln hinzu (bis zurück zu IE11).
• Cross-browser Flexbox bugs werden korrigiert, um sich gemäß der Spezifikation zu verhalten.
• Neue CSS-Features werden automatisch für Internet Explorer 11 kompatibel gemacht:
  • all-Eigenschaft
  • Break-Eigenschaften
  • font-variant-Eigenschaft
  • Gap-Eigenschaften
  • Media Query Ranges

Standardmäßig werden CSS Grid und Custom Properties (CSS-Variablen) nicht für IE11-Unterstützung kompiliert.

Um CSS Grid Layout für IE11 zu kompilieren, können Sie folgenden Kommentar an den Anfang Ihrer CSS-Datei setzen:

/* autoprefixer grid: autoplace */

Sie können auch IE11-Unterstützung für CSS Grid Layout in Ihrem gesamten Projekt aktivieren, indem Sie Autoprefixer mit der unten gezeigten Konfiguration einrichten (ausgeklappt). Weitere Informationen finden Sie unter "Plugins anpassen".

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

CSS-Variablen werden nicht kompiliert, da dies nicht sicher möglich ist. Wenn Sie Variablen verwenden müssen, sollten Sie stattdessen Sass-Variablen verwenden, die von Sass kompiliert werden.

Zielbrowser anpassen

Next.js ermöglicht die Konfiguration der Zielbrowser (für Autoprefixer und kompilierte CSS-Features) über Browserslist.

Um Browserslist anzupassen, erstellen Sie einen browserslist-Schlüssel in Ihrer package.json wie folgt:

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

Sie können das Tool browsersl.ist verwenden, um zu visualisieren, welche Browser Sie ansprechen.

CSS-Module

Für die Unterstützung von CSS-Modulen ist keine Konfiguration erforderlich. Um CSS-Module für eine Datei zu aktivieren, benennen Sie die Datei mit der Endung .module.css um.

Mehr über die CSS-Module-Unterstützung von Next.js erfahren Sie hier.

Plugins anpassen

Warnung: Wenn Sie eine benutzerdefinierte PostCSS-Konfigurationsdatei definieren, deaktiviert Next.js das Standardverhalten vollständig. Stellen Sie sicher, dass Sie alle benötigten Features manuell konfigurieren, einschließlich Autoprefixer. Sie müssen auch alle in Ihrer Konfiguration enthaltenen Plugins manuell installieren, z.B. npm install postcss-flexbugs-fixes postcss-preset-env.

Um die PostCSS-Konfiguration anzupassen, erstellen Sie eine postcss.config.json-Datei im Stammverzeichnis Ihres Projekts.

Dies ist die Standardkonfiguration, die von Next.js verwendet wird:

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

Gut zu wissen: Next.js erlaubt auch die Benennung der Datei als .postcssrc.json oder die Angabe der Konfiguration über den postcss-Schlüssel in package.json.

Es ist auch möglich, PostCSS mit einer postcss.config.js-Datei zu konfigurieren, was nützlich ist, wenn Sie Plugins basierend auf der Umgebung bedingt einbinden möchten:

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

Gut zu wissen: Next.js erlaubt auch die Benennung der Datei als .postcssrc.js.

Verwenden Sie nicht require(), um die PostCSS-Plugins zu importieren. Plugins müssen als Zeichenketten bereitgestellt werden.

Gut zu wissen: Wenn Ihre postcss.config.js auch andere Nicht-Next.js-Tools im selben Projekt unterstützen muss, sollten Sie das interoperable objektbasierte Format verwenden:

module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}