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 in Betracht ziehen, 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 Modules

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

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

Plugins anpassen

Warnung: Wenn Sie eine benutzerdefinierte PostCSS-Konfigurationsdatei definieren, deaktiviert Next.js vollständig das Standardverhalten. Stellen Sie sicher, dass Sie alle benötigten Features manuell konfigurieren, einschließlich Autoprefixer. Sie müssen auch alle Plugins, die in Ihrer benutzerdefinierten Konfiguration enthalten sind, 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, dass die Datei .postcssrc.json genannt wird oder die Konfiguration aus dem postcss-Schlüssel in package.json gelesen wird.

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, dass die Datei .postcssrc.js genannt wird.

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

Gut zu wissen: Wenn Ihre postcss.config.js andere Nicht-Next.js-Tools im selben Projekt unterstützen muss, müssen 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,
      },
    },
  },
}