Compilation CSS avec VITE et Lightning CSS
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1655
14
1414
52
1307
25
1253
29
1227
24
Fontes variables de polices Google
Apr 09, 2025 am 10:42 AM
Je vois que Google Fonts a déployé un nouveau design (tweet). Comparé à la dernière grande refonte, cela semble beaucoup plus itératif. Je peux à peine faire la différence
Comment créer un compte à rebours animé avec HTML, CSS et JavaScript
Apr 11, 2025 am 11:29 AM
Avez-vous déjà eu besoin d'un compte à rebours sur un projet? Pour quelque chose comme ça, il pourrait être naturel d'atteindre un plugin, mais c'est en fait beaucoup plus
Guide des attributs de données HTML
Apr 11, 2025 am 11:50 AM
Tout ce que vous avez toujours voulu savoir sur les attributs de données dans HTML, CSS et JavaScript.
Comment sélectionner un élément enfant avec l'élément de nom de première classe via CSS?
Apr 05, 2025 pm 11:24 PM
Lorsque le nombre d'éléments n'est pas fixé, comment sélectionner le premier élément enfant du nom de classe spécifié via CSS. Lors du traitement de la structure HTML, vous rencontrez souvent différents éléments ...
Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»?
Apr 05, 2025 pm 05:51 PM
Questions sur les zones de slash violet dans les dispositions flexibles Lorsque vous utilisez des dispositions flexibles, vous pouvez rencontrer des phénomènes déroutants, comme dans les outils du développeur (D ...
Une preuve de concept pour rendre Sass plus rapidement
Apr 16, 2025 am 10:38 AM
Au début d'un nouveau projet, la compilation SASS se produit en un clin d'œil. Cela se sent bien, surtout quand il est associé à BrowSersync, qui recharge
Comment nous avons créé un site statique qui génère des modèles tartan dans SVG
Apr 09, 2025 am 11:29 AM
Le tartan est un chiffon à motifs qui est généralement associé à l'Écosse, en particulier leurs kilts à la mode. Sur tartanify.com, nous avons rassemblé plus de 5 000 tartan
Dans le développement frontal, comment utiliser CSS et JavaScript pour obtenir des effets de procédure similaires à l'interface des paramètres de Windows 10?
Apr 05, 2025 pm 10:21 PM
Comment implémenter des fenêtres dans le développement frontal ...
