PostCSS

Standardverhalten

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

Ohne jegliche Konfiguration kompiliert Next.js CSS mit den folgenden Transformationen:

• Autoprefixer fügt CSS-Regeln automatisch Vendor-Präfixe hinzu (bis IE11).
• Browserübergreifende Flexbox-Fehler werden korrigiert, um sich wie die Spezifikation zu verhalten.
• Neue CSS-Funktionen werden automatisch für Internet Explorer 11-Kompatibilität kompiliert:
  • all-Eigenschaft
  • Break-Eigenschaften
  • font-variant-Eigenschaft
  • Gap-Eigenschaften
  • Media-Query-Bereiche

Standardmäßig werden CSS Grid und Benutzerdefinierte Eigenschaften (CSS-Variablen) nicht für IE11 kompiliert.

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

/* autoprefixer grid: autoplace */

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

{
  "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, erwägen Sie die Nutzung von Sass-Variablen, die von Sass kompiliert werden.

Zielbrowser anpassen

Next.js ermöglicht es Ihnen, die Zielbrowser (für Autoprefixer und kompilierte CSS-Funktionen) über Browserslist zu konfigurieren.

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 browsersl.ist-Tool verwenden, um zu visualisieren, welche Browser Sie als Ziel haben.

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 Erweiterung .module.css.

Weitere Informationen zur CSS-Modulunterstützung von Next.js finden 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 Funktionen, die Sie kompilieren möchten, manuell konfigurieren, einschließlich Autoprefixer. Sie müssen auch alle in Ihrer benutzerdefinierten Konfiguration enthaltenen Plugins manuell installieren, d.h. 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 von Next.js verwendete Standardkonfiguration:

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

Hinweis: Next.js erlaubt auch, dass die Datei .postcssrc.json benannt wird oder 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 abhängig von 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
        ],
}

Hinweis: Next.js erlaubt auch, dass die Datei .postcssrc.js benannt wird.

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

Hinweis: Wenn Ihre postcss.config.js die Unterstützung anderer Nicht-Next.js-Tools im gleichen Projekt benötigt, müssen Sie stattdessen das interoperable objektbasierte Format verwenden:

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