Menyusun CSS dengan Vite dan Lightning CSS
), peningkatan progresif, dan polyfills. Membina alat menawarkan bantuan tambahan. @supports
Talian paip membina biasa sering melibatkan:
- Generasi Aset Statik
- Bangunan fail aplikasi
- bundling untuk penempatan
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
, assets/, public/, dan src/. Hanya .gitignore dan index.html dengan: package.json
index.html
<!DOCTYPE html> <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
. Buat folder node_modules/ dan package-lock.json di dalamnya. Tambah tag styles/ ke main.css: <link>
index.html
<!DOCTYPE html> <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
body {
background: green;
}Folder
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):
<!DOCTYPE html> <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:
<!DOCTYPE html> <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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1653
14
1413
52
1304
25
1251
29
1224
24
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Fon Font Google Fon
Apr 09, 2025 am 10:42 AM
Saya melihat Font Google melancarkan reka bentuk baru (tweet). Berbanding dengan reka bentuk besar yang terakhir, ini terasa lebih berulang. Saya hampir tidak dapat memberitahu perbezaannya
Cara membuat pemasa undur animasi dengan HTML, CSS dan JavaScript
Apr 11, 2025 am 11:29 AM
Pernahkah anda memerlukan pemasa undur dalam projek? Untuk sesuatu seperti itu, mungkin semula jadi untuk mencapai plugin, tetapi sebenarnya lebih banyak lagi
Panduan Atribut Data HTML
Apr 11, 2025 am 11:50 AM
Semua yang anda ingin tahu mengenai atribut data dalam HTML, CSS, dan JavaScript.
Bagaimana untuk memilih elemen kanak -kanak dengan item nama kelas pertama melalui CSS?
Apr 05, 2025 pm 11:24 PM
Apabila bilangan elemen tidak ditetapkan, bagaimana untuk memilih elemen anak pertama nama kelas yang ditentukan melalui CSS. Semasa memproses struktur HTML, anda sering menghadapi unsur yang berbeza ...
Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'?
Apr 05, 2025 pm 05:51 PM
Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...
Bukti konsep untuk menjadikan sass lebih cepat
Apr 16, 2025 am 10:38 AM
Pada permulaan projek baru, kompilasi SASS berlaku dalam sekejap mata. Ini terasa hebat, terutamanya apabila ia dipasangkan dengan BrowserSync, yang dimuat semula
Dalam pembangunan front-end, bagaimana menggunakan CSS dan JavaScript untuk mencapai kesan pencahayaan yang serupa dengan antara muka tetapan Windows 10?
Apr 05, 2025 pm 10:21 PM
Cara melaksanakan Windows-like dalam pembangunan depan ...
