CSS Academy · Ders

Vite ve Webpack'te PostCSS

Vite yapılandırmasını ve webpack yükleyicilerini kullanarak PostCSS'yi modern derleme işlem hatlarına entegre edin.

Vite ve Webpack'te PostCSS, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Vite'ta PostCSS

Vite, yerleşik PostCSS desteğine sahiptir. Proje kökünde bir postcss.config.js dosyası oluşturun; Vite bunu geliştirme ve derleme sırasında tüm CSS dosyalarına otomatik olarak uygular.

// postcss.config.js
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';

export default {
  plugins: [
    autoprefixer,
    process.env.NODE_ENV === 'production' ? cssnano({ preset: 'default' }) : false
  ].filter(Boolean)
};

Vite CSS Seçenekleri

Alternatif olarak PostCSS'yi vite.config.js içinde satır içi olarak yapılandırın:

// vite.config.js
import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
});

webpack'te PostCSS

webpack, modül kuralları zincirinde postcss-loader kullanır. Bunu her zaman css-loader'dan sonra ve diğer CSS dönüşümlerinden önce yerleştirin:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['autoprefixer']
              }
            }
          }
        ]
      }
    ]
  }
};

Yapılandırma Dosyasıyla postcss-loader

postcss-loader'ı harici bir yapılandırma dosyasına yönlendirin:

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      config: './postcss.config.js'
    }
  }
}

Vite'ta Sass ile PostCSS

Vite önce Sass'ı, ardından PostCSS'yi işler. sass'ı ve PostCSS plugin'lerini yükleyin; Vite işlem hattını otomatik olarak yönetir:

npm install --save-dev sass autoprefixer cssnano

postcss-preset-env

postcss-preset-env, modern CSS'yi (iç içe yazım, özel medya sorguları vb.) tarayıcılarla uyumlu CSS'ye dönüştürür; JavaScript için Babel'e benzer. Hedef aşamayı yapılandırın:

plugins: [
  require('postcss-preset-env')({
    stage: 3, // use stage 3+ features
    features: { 'nesting-rules': true }
  })
]

PostCSS ile CSS Modules

CSS Modules (kapsamlandırılmış sınıf adları), hem Vite hem de webpack'te PostCSS ile bütünleşir. Modül kapsamlandırması uygulanmadan önce CSS'yi PostCSS üzerinden işlerler.

// vite.config.js
export default {
  css: {
    modules: { localsConvention: 'camelCase' },
    postcss: { plugins: [autoprefixer()] }
  }
}

PostCSS'nin Uygulandığını Denetleme

Vite DevTools'ta dönüştürülmüş CSS kaynak eşlemelerini görüntüleyin. autoprefixer tarafından eklenen ön ekli özellikler derlenmiş çıktıda görünür. vite build komutunu çalıştırın ve cssnano küçültmesini doğrulamak için dist/assets/*.css dosyasını inceleyin.

Alternatif Olarak LightningCSS

Vite artık PostCSS'ye daha hızlı bir alternatif olarak lightningcss desteği sunuyor. Tek bir Rust geçişinde otomatik ön ek ekleme, iç içe yazım ve küçültme işlemlerini gerçekleştirir:

export default {
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  }
}

Üretim Derlemesini Optimize Etme

cssnano'yu (veya lightningcss küçültmesini) yalnızca üretim derlemelerinde etkinleştirin. Geliştirme derlemeleri, daha kolay hata ayıklama için okunabilir ve kaynak eşlemeleri içeren CSS üretmelidir.

Hızlı Kontrol

PostCSS işlemesi webpack CSS yükleyici zincirinin neresinde gerçekleşir?

Özet

Vite, postcss.config.js aracılığıyla yerleşik PostCSS desteğine sahiptir. webpack, css-loader'dan sonra postcss-loader kullanır. Modern CSS çoklu dolguları için postcss-preset-env kullanın. cssnano'yu yalnızca üretim derlemelerinde etkinleştirin. Daha hızlı Vite derlemeleri için lightningcss'yi değerlendirin. Dönüştürülmüş CSS'de hata ayıklamak için her zaman kaynak eşlemeleri oluşturun.

Sıkça Sorulan Sorular

“Vite ve Webpack'te PostCSS” dersi ücretsiz mi?

Evet — “Vite ve Webpack'te PostCSS” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Vite ve Webpack'te PostCSS” dersinde ne öğreneceğim?

Vite yapılandırmasını ve webpack yükleyicilerini kullanarak PostCSS'yi modern derleme işlem hatlarına entegre edin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Vite ve Webpack'te PostCSS” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön