Compilation CSS avec VITE et Lightning CSS-tutoriel CSS-php.cn

Compilation CSS avec VITE et Lightning CSS

Lisa Kudrow

Libérer： 2025-03-07 16:57:11

original

656 Les gens l'ont consulté

Compiling CSS With Vite and 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

Copier après la connexion

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>

Copier après la connexion

Installez les dépendances de Vite:

npm install

Copier après la connexion

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

Copier après la connexion

Ajoutez du CSS à main.css:

body {
  background: green;
}

Copier après la connexion

Exécutez la commande Vite Build:

npm run build

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

Créer layouts.css avec une couche layouts:

npm install

Copier après la connexion

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

Copier après la connexion

Créer vite.config.mjs:

body {
  background: green;
}

Copier après la connexion

Testez avec une couleur oklch dans main.css:

npm run build

Copier après la connexion

LightningCSS fournit des secours. Pour la prise en charge ciblée du navigateur, installez browserslist:

npm run dev

Copier après la connexion

Configurer vite.config.mjs:

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

Copier après la connexion

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!