Kompilieren von CSS mit VITE- und Lightning -CSS

Aufstrich mit CSS -Fortschritten auf dem Laufenden bleiben häufig mit dem Browser -Kompatibilitätsprobleme. Selbst bei weit verbreiteten Feature -Releases können Benutzerbrowserversionen zurückbleiben. Wir beheben dies durch die Merkmalserkennung (@supports), die progressive Verbesserung und Polyfills. Build -Tools bieten zusätzliche Unterstützung.

Während viele CSS-Entwickler Vorverarbeiter verwenden (SASS, weniger), hat ihre Notwendigkeit mit der Entwicklung nativer CSS-Funktionen wie Verschachtelung und benutzerdefinierten Eigenschaften verringert. Die Vorverarbeiter boten hauptsächlich organisatorische Vorteile und erweiterte CSS-Funktionen. Nachbearbeitungswerkzeuge wie Postcss erledigen Aufgaben wie automatische Vorbereitungen und Minifikation.

Typische Build -Pipelines umfassen häufig:

1. statische Vermögensgenerierung
2. Anwendungsdatei erstellen
3. Bündelung für die Bereitstellung

Die Verarbeitung

CSS fällt normalerweise in den ersten Schritt und umfasst die Vor- und Nachbearbeitung. Das moderne CSS verringert die Abhängigkeit von Vorverarbeitern und rationalisiert den Prozess möglicherweise.

vite: Ein schneller CSS -Compiler

vite, ein sehr beliebtes Build-Tool, zeichnet sich aus, um JavaScript-Front-End-Frameworks (Angular, React, Svelte, Vue) zu erstellen. Seine Geschwindigkeit und Anpassungsfähigkeit machen es zu einem wertvollen Kapital. Obwohl Vite hauptsächlich für JavaScript bekannt ist, wird CSS nahtlos behandelt, ohne JavaScript -Code zu benötigen. Es unterstützt SASS (für separate Installation) und kompiliert CSS mit minimaler Konfiguration nativ.

Dieses Tutorial verwendet Knoten und NPM. Stellen Sie sicher, dass Sie sie installieren lassen. Erstellen Sie ein neues Projekt:

npm create vite@latest

Wählen Sie "Vanille" und "JavaScript" für eine grundlegende Vorlage. Öffnen Sie das Projekt in Ihrer IDE. Für diese Demonstration löschen Sie assets/, public/, src/ und .gitignore. Nur index.html und package.json sollten bleiben. Ersetzen Sie den Inhalt von index.html durch:

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>

Installieren Sie die Abhängigkeiten von Vite:

npm install

Dies erstellt node_modules/ und package-lock.json. Erstellen Sie einen styles/ Ordner und main.css darin. Fügen Sie ein <link> Tag zu index.html:

hinzu

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

Fügen Sie ein paar CSS zu main.css:

hinzu

body {
  background: green;
}

Führen Sie den Befehl vite Build aus:

npm run build

Der Ordner dist/ enthält die erstellten Dateien. assets/index.css (mit einem einzigartigen Hash) zeigt das Minified CSS.

Verwenden Sie für eine schnellere Iteration den Entwicklungsserver von Vite:

npm run dev

Dies startet den Server auf Port 5173. Änderungen in HTML oder CSS werden sofort reflektiert. Verwenden Sie <kbd>CTRL</kbd> <kbd>C</kbd>, um den Server zu stoppen.

Organisieren mit Kaskadenschichten

Während der direkten Anwendung von Kaskadenschichten auf <link> Tags derzeit nicht möglich ist, können wir dies für organisatorische Zwecke simulieren. Definieren Sie in main.css Schichten:

npm create vite@latest

erstellen reset.css und importieren ein CSS -Reset (z. B. Mayank's):

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>

erstellen layouts.css mit einer layouts schicht:

npm install

Fügen Sie Links zu reset.css und layouts.css in index.html hinzu, wobei die gewünschte Reihenfolge beibehalten wird. Dieser Ansatz hilft, CSS -Vorrang und Gruppierung zu verwalten.

Nachbearbeitung mit LightningCSS

LightningCSS verbessert die Kompatibilität der Kreuzbrowser. Installieren Sie es:

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

erstellen vite.config.mjs:

body {
  background: green;
}

Test mit einer oklch Farbe in main.css:

npm run build

LightningCSS liefert Fallbacks. Installieren Sie für gezielte Browserunterstützung browserslist:

npm run dev

konfigurieren vite.config.mjs:

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

Dies ermöglicht eine feinkörnige Steuerung über LightningCSS-Funktionen.

Notwendigkeit?

Obwohl für alle Projekte nicht wesentlich ist, können diese Techniken-insbesondere für größere Projekte oder Designsysteme-erhebliche Vorteile in der Organisation, in der Cross-Browser-Kompatibilität und der CSS-Optimierung erhalten.

Das obige ist der detaillierte Inhalt vonKompilieren von CSS mit VITE- und Lightning -CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!