Heim >Web-Frontend >CSS-Tutorial >Kompilieren von CSS mit VITE- und Lightning -CSS
Kompilieren von CSS mit VITE- und Lightning -CSS
- Lisa KudrowOriginal
- 2025-03-07 16:57:11659Durchsuche
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:
- statische Vermögensgenerierung
- Anwendungsdatei erstellen
- Bündelung für die Bereitstellung
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:
<!DOCTYPE html> <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:
<!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">
Fügen Sie ein paar CSS zu main.css:
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):
<!DOCTYPE html> <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:
<!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">
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!