Menyusun CSS dengan Vite dan Lightning CSS

Tinggal semasa dengan kemajuan CSS sering bermaksud bergelut dengan isu keserasian penyemak imbas. Walaupun dengan siaran ciri yang meluas, versi pelayar pengguna mungkin ketinggalan. Kami menangani ini melalui pengesanan ciri (

), peningkatan progresif, dan polyfills. Membina alat menawarkan bantuan tambahan. @supports

Walaupun banyak pemaju CSS menggunakan pra-pemproses (SASS, kurang), keperluan mereka telah berkurang dengan evolusi ciri-ciri CSS asli seperti bersarang dan sifat tersuai. Pra-pemproses terutamanya menawarkan manfaat organisasi dan fungsi CSS yang dilanjutkan. Alat pasca pemprosesan, seperti postcss, mengendalikan tugas seperti auto-prefixing dan minification.

Talian paip membina biasa sering melibatkan:

Generasi Aset Statik
Bangunan fail aplikasi
bundling untuk penempatan

pemprosesan CSS biasanya berada di bawah langkah pertama, merangkumi pra dan pasca pemprosesan. CSS moden mengurangkan pergantungan pada pra-pemproses, yang berpotensi menyelaraskan proses.

Vite: pengkompil CSS yang cepat

Vite, alat binaan yang sangat popular, cemerlang dalam membina rangka kerja front-end JavaScript (Angular, React, Svelte, Vue). Kelajuan dan kesesuaiannya menjadikannya aset yang berharga. Walaupun terutamanya dikenali untuk JavaScript, Vite dengan lancar mengendalikan CSS tanpa memerlukan kod JavaScript. Ia menyokong SASS (memerlukan pemasangan berasingan) dan menyusun CSS dengan konfigurasi yang minimum.

Tutorial ini menggunakan Node dan NPM. Pastikan anda memasangnya. Buat projek baru:

npm create vite@latest

Pilih "Vanilla" dan "JavaScript" untuk templat asas. Buka projek di IDE anda. Untuk demonstrasi ini, padam

, assets/, public/, dan src/. Hanya .gitignore dan harus kekal. Gantikan kandungan index.html dengan: package.json index.html

Pasang kebergantungan Vite:

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>

Ini mencipta

npm install

dan

. Buat folder node_modules/ dan package-lock.json di dalamnya. Tambah tag styles/ ke main.css: <link> index.html

tambah beberapa CSS ke

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>
  <link rel="stylesheet" href="styles/main.css">

:

main.css

Jalankan perintah binaan Vite:

body {
  background: green;
}

Folder npm run build (dengan hash unik) menunjukkan CSS yang minifikasi.

dist/ Untuk lelaran yang lebih cepat, gunakan pelayan pembangunan Vite: assets/index.css

Ini memulakan pelayan pada port 5173. Perubahan dalam HTML atau CSS dicerminkan dengan serta -merta. Gunakan

untuk menghentikan pelayan.

npm run dev

menganjurkan dengan lapisan lata

Semasa memohon lapisan cascade terus ke <link> tag tidak mungkin, Vite membolehkan kita mensimulasikan ini untuk tujuan organisasi. Dalam main.css, tentukan lapisan:

npm create vite@latest

membuat reset.css dan mengimport semula CSS Reset (mis., Mayank):

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>

create layouts.css dengan lapisan layouts:

npm install

Tambah pautan ke reset.css dan layouts.css dalam index.html, mengekalkan perintah yang dikehendaki. Pendekatan ini membantu menguruskan keutamaan dan kumpulan CSS.

Post-pemprosesan dengan Lightningcss

LightningCSS meningkatkan keserasian silang penyemak imbas. Pasangnya:

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>
  <link rel="stylesheet" href="styles/main.css">

Buat vite.config.mjs:

body {
  background: green;
}

ujian dengan warna oklch dalam main.css:

npm run build

LightningCSS menyediakan sandaran. Untuk sokongan penyemak imbas yang disasarkan, pasang browserslist:

npm run dev

Konfigurasi vite.config.mjs:

/* styles/main.css */
@layer reset, layouts;

Ini membolehkan kawalan halus ke atas ciri-ciri LightningCSS.

Keperluan?

Walaupun tidak penting untuk semua projek, teknik-teknik ini-terutamanya untuk projek yang lebih besar atau sistem reka bentuk-menawarkan kelebihan yang signifikan dalam organisasi, keserasian silang pelayar, dan pengoptimuman CSS.

Atas ialah kandungan terperinci Menyusun CSS dengan Vite dan Lightning CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!