CSS Academy · Pelajaran

PostCSS dalam Vite dan Webpack

Integrasikan PostCSS ke dalam alur pembangunan modern menggunakan konfigurasi Vite dan pemuat webpack.

PostCSS dalam Vite dan Webpack adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

PostCSS di Vite

Vite memiliki dukungan PostCSS bawaan. Buat berkas postcss.config.js di akar proyek, lalu Vite akan menerapkannya secara otomatis ke semua berkas CSS selama pengembangan dan proses pembangunan.

// 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)
};

Opsi CSS Vite

Sebagai alternatif, konfigurasikan PostCSS secara langsung dalam vite.config.js:

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

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

PostCSS di webpack

webpack menggunakan postcss-loader dalam rantai aturan modul. Selalu letakkan loader tersebut setelah css-loader dan sebelum transformasi CSS lainnya:

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

postcss-loader dengan Berkas Konfigurasi

Arahkan postcss-loader ke berkas konfigurasi eksternal:

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

PostCSS dengan Sass di Vite

Vite memproses Sass terlebih dahulu, lalu PostCSS. Instal sass dan plugin PostCSS—Vite menangani alur tersebut secara otomatis:

npm install --save-dev sass autoprefixer cssnano

postcss-preset-env

postcss-preset-env mengonversi CSS modern (penyarangan, media kustom, dan sebagainya) menjadi CSS yang kompatibel dengan peramban—serupa dengan Babel untuk JavaScript. Konfigurasikan tahap target:

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

CSS Modules dengan PostCSS

CSS Modules (nama kelas dengan cakupan) terintegrasi dengan PostCSS di Vite maupun webpack. CSS diproses melalui PostCSS sebelum pencakupan modul diterapkan.

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

Memeriksa Penerapan PostCSS

Di DevTools Vite, lihat peta sumber CSS yang telah ditransformasikan. Properti dengan awalan dari autoprefixer akan terlihat dalam keluaran terkompilasi. Jalankan vite build dan periksa dist/assets/*.css untuk memverifikasi minifikasi cssnano.

LightningCSS sebagai Alternatif

Vite kini mendukung lightningcss sebagai alternatif yang lebih cepat daripada PostCSS. LightningCSS menangani penambahan awalan, penyarangan, dan minifikasi dalam satu tahap pemrosesan Rust:

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

Optimisasi Pembangunan Produksi

Selalu aktifkan cssnano (atau minifikasi lightningcss) hanya untuk versi produksi. Versi pengembangan harus menghasilkan CSS yang mudah dibaca dan memiliki peta sumber agar penelusuran kesalahan menjadi lebih mudah.

Pemeriksaan Singkat

Di mana pemrosesan PostCSS berlangsung dalam rantai pemuat CSS webpack?

Ringkasan

Vite memiliki dukungan PostCSS bawaan melalui postcss.config.js. webpack menggunakan postcss-loader setelah css-loader. Gunakan postcss-preset-env untuk polifil CSS modern. Aktifkan cssnano hanya untuk versi produksi. Pertimbangkan lightningcss untuk pembangunan Vite yang lebih cepat. Selalu hasilkan peta sumber untuk menelusuri kesalahan pada CSS yang telah ditransformasikan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “PostCSS dalam Vite dan Webpack” gratis?

Ya — teks lengkap “PostCSS dalam Vite dan Webpack” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “PostCSS dalam Vite dan Webpack”?

Integrasikan PostCSS ke dalam alur pembangunan modern menggunakan konfigurasi Vite dan pemuat webpack. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “PostCSS dalam Vite dan Webpack” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy