PostCSS

Default Behavior

Next.js, PostCSS kullanarak yerleşik CSS desteği için CSS derler.

Next.js, kutudan çıktığı anda hiçbir yapılandırma olmadan CSS'yi aşağıdaki dönüşümlerle derler:

• Autoprefixer satıcı öneklerini CSS kurallarına otomatik olarak ekler (IE11'e geri dönün).
• Tarayıcılar arası Flexbox hataları, spesifikasyonu gibi davranacak şekilde düzeltildi.
• Yeni CSS özellikleri Internet Explorer 11 uyumluluğu için otomatik olarak derlenir:
  • all Mülkiyet
  • Mola Özellikleri
  • font-variant Mülkiyet
  • Gap Gayrimenkulleri
  • Medya Sorgu Aralıkları

Varsayılan olarak, CSS Grid ve Custom Properties (CSS değişkenleri) IE11 desteği için derlenmez.

IE11 için CSS Izgara Düzeni derlemek için CSS dosyanızın en üstüne aşağıdaki yorumu yerleştirebilirsiniz:

/* autoprefixer grid: autoplace */

Ayrıca, otomatik önekleyiciyi aşağıda gösterilen yapılandırmayla (daraltılmış) yapılandırarak tüm projenizde CSS Izgara Düzeniiçin IE11 desteğini etkinleştirebilirsiniz. Daha fazla bilgi için aşağıdaki "Eklentileri Özelleştirme" bölümüne bakın.

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

CSS değişkenleri derlenmez çünkü bunu güvenli bir şekilde yapmak mümkün değildir . Değişken kullanmanız gerekiyorsa, Sass tarafından derlenen Sass değişkenleri gibi bir şey kullanmayı düşünün .

Customizing Target Browsers

Next.js, Browserslist aracılığıyla hedef tarayıcıları ( Autoprefixer ve derlenmiş css özellikleri için) yapılandırmanıza olanak tanır.

Tarayıcı listesini özelleştirmek için package.json adresinizde aşağıdaki gibi bir browserslist anahtarı oluşturun:

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

Hangi tarayıcıları hedeflediğinizi görselleştirmek için browsersl.ist aracını kullanabilirsiniz.

CSS Modules

CSS Modüllerini desteklemek için yapılandırmaya gerek yoktur. Bir dosya için CSS Modüllerini etkinleştirmek için dosyayı .module.css uzantısına sahip olacak şekilde yeniden adlandırın.

Next.js'nin CSS Modülü desteği hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Customizing Plugins

Uyarı: Özel bir PostCSS yapılandırma dosyası tanımladığınızda, Next.js varsayılan davranışı tamamen devre dışı bırakır. Autoprefixer dahil olmak üzere derlenmesi gereken tüm özellikleri manuel olarak yapılandırdığınızdan emin olun . Ayrıca, özel yapılandırmanıza dahil olan tüm eklentileri manuel olarak yüklemeniz gerekir, örn. npm install postcss-flexbugs-fixes postcss-preset-env.

PostCSS yapılandırmasını özelleştirmek için projenizin kök dizininde bir postcss.config.json dosyası oluşturun.

Bu, Next.js tarafından kullanılan varsayılan yapılandırmadır:

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

Bilmekte fayda var: Next.js ayrıca dosyanın .postcssrc.json olarak adlandırılmasına veya package.json adresindeki postcss anahtarından okunmasına izin verir.

PostCSS'yi bir postcss.config.js dosyası ile yapılandırmak da mümkündür; bu, eklentileri ortama göre koşullu olarak dahil etmek istediğinizde kullanışlıdır:

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
        ],
}

Bilmekte fayda var: Next.js ayrıca dosyanın .postcssrc.js olarak adlandırılmasına da izin verir.

PostCSS Eklentilerini içe aktarmak için require() adresini kullanmayın. Eklentiler string olarak sağlanmalıdır.

Bilmekte fayda var: postcss.config.js adresinizin aynı projede Next.js dışındaki diğer araçları desteklemesi gerekiyorsa, bunun yerine birlikte çalışabilir nesne tabanlı formatı kullanmanız gerekir:

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