Maison >interface Web >tutoriel CSS >Compilation CSS avec VITE et Lightning CSS
Compilation CSS avec VITE et Lightning CSS
- Lisa Kudroworiginal
- 2025-03-07 16:57:11659parcourir
Rester à jour avec les progrès du CSS signifie souvent des prises avec des problèmes de compatibilité du navigateur. Même avec les versions généralisées des fonctionnalités, les versions du navigateur d'utilisateurs peuvent être à la traîne. Nous abordons cela par la détection des fonctionnalités (@supports), l'amélioration progressive et les polyfills. Les outils de construction offrent une assistance supplémentaire.
Alors que de nombreux développeurs CSS utilisent des pré-processeurs (SASS, moins), leur nécessité a diminué avec l'évolution des fonctionnalités CSS natives comme la nidification et les propriétés personnalisées. Les pré-processeurs offraient principalement des avantages organisationnels et une fonctionnalité CSS étendue. Des outils de post-traitement, comme les PostCSS, gérent des tâches telles que l'auto-préfixation et la minification.
Les pipelines de construction typiques impliquent souvent:
- Génération d'actifs statique
- Bâtiment de fichiers d'application
- Fonctionnement pour le déploiement
Le traitement CSS tombe généralement sous la première étape, englobant le pré- et le post-traitement. Le CSS moderne réduit la dépendance aux pré-processeurs, rationalisant potentiellement le processus.
Vite: un compilateur CSS rapide
Vite, un outil de construction très populaire, excelle dans la construction de cadres frontaux JavaScript (Angular, React, Svelte, Vue). Sa vitesse et son adaptabilité en font un atout précieux. Bien que principalement connu pour JavaScript, Vite gère de manière transparente CSS sans nécessiter de code JavaScript. Il prend en charge SASS (nécessitant une installation séparée) et compile nativement CSS avec une configuration minimale.
Ce tutoriel utilise le nœud et le npm. Assurez-vous que vous les avez installés. Créer un nouveau projet:
npm create vite@latest
Sélectionnez "Vanilla" et "JavaScript" pour un modèle de base. Ouvrez le projet dans votre IDE. Pour cette démonstration, supprimez assets/, public/, src/ et .gitignore. Seuls index.html et package.json devraient rester. Remplacez le contenu de index.html par:
<!DOCTYPE html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Only Vite Project</title>
Installez les dépendances de Vite:
npm install
cela crée node_modules/ et package-lock.json. Créez un dossier styles/ et main.css à l'intérieur. Ajoutez une balise <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">
Ajoutez du CSS à main.css:
body {
background: green;
}
Exécutez la commande Vite Build:
npm run build
Le dossier dist/ contient les fichiers construits. assets/index.css (avec un hachage unique) montre le CSS minifié.
Pour une itération plus rapide, utilisez le serveur de développement de Vite:
npm run dev
Cela démarre le serveur sur le port 5173. Les modifications de HTML ou CSS sont réfléchies instantanément. Utilisez <kbd>CTRL</kbd> <kbd>C</kbd> pour arrêter le serveur.
Organisation avec des couches en cascade
Bien que l'application des couches en cascade directement sur <link> les balises ne soit pas possible, VITE nous permet de simuler cela à des fins organisationnelles. Dans main.css, définir les couches:
npm create vite@latest
Créer reset.css et importer une réinitialisation CSS (par exemple, Mayank's):
<!DOCTYPE html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Only Vite Project</title>
Créer layouts.css avec une couche layouts:
npm install
Ajouter des liens vers reset.css et layouts.css dans index.html, en maintenant l'ordre souhaité. Cette approche aide à gérer la priorité et le regroupement du CSS.
post-traitement avec Lightningcss
LightningCSS améliore la compatibilité des navigateurs croisés. Installez-le:
<!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">
Créer vite.config.mjs:
body {
background: green;
}
Testez avec une couleur oklch dans main.css:
npm run build
LightningCSS fournit des secours. Pour la prise en charge ciblée du navigateur, installez browserslist:
npm run dev
Configurer vite.config.mjs:
/* styles/main.css */ @layer reset, layouts;
Cela permet un contrôle à grains fins sur les fonctionnalités LightningCSS.
nécessité?
Bien qu'il ne soit pas essentiel pour tous les projets, ces techniques - en particulier pour les projets ou les systèmes de conception plus importants - offrent des avantages importants dans l'organisation, la compatibilité entre les navigateurs et l'optimisation CSS.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!