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:

1. Génération d'actifs statique
2. Bâtiment de fichiers d'application
3. 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:

  <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:

  <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):

  <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:

  <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!