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:
- 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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1655
14
1413
52
1306
25
1252
29
1226
24
Google -Schriftarten variable Schriftarten
Apr 09, 2025 am 10:42 AM
Ich sehe, dass Google -Schriftarten ein neues Design (Tweet) ausgelöst haben. Im Vergleich zur letzten großen Neugestaltung fühlt sich dies viel iterativer an. Ich kann den Unterschied kaum erkennen
So erstellen Sie einen animierten Countdown -Timer mit HTML, CSS und JavaScript
Apr 11, 2025 am 11:29 AM
Haben Sie jemals einen Countdown -Timer für ein Projekt benötigt? Für so etwas ist es möglicherweise natürlich, nach einem Plugin zu greifen, aber es ist tatsächlich viel mehr
HTML -Datenattributehandbuch
Apr 11, 2025 am 11:50 AM
Alles, was Sie schon immer über Datenattribute in HTML, CSS und JavaScript wissen wollten.
Wie wähle ich ein untergeordnetes Element mit dem erstklassigen Namen über CSS aus?
Apr 05, 2025 pm 11:24 PM
Wenn die Anzahl der Elemente nicht festgelegt ist, wählen Sie das erste untergeordnete Element des angegebenen Klassennamens über CSS aus. Bei der Verarbeitung der HTML -Struktur begegnen Sie häufig auf verschiedene Elemente ...
Warum werden die lila abgeschnittenen Bereiche im Flex -Layout fälschlicherweise als 'Überlaufraum' betrachtet?
Apr 05, 2025 pm 05:51 PM
Fragen zu lila Schrägstrichen in Flex -Layouts Bei der Verwendung von Flex -Layouts können Sie auf einige verwirrende Phänomene stoßen, wie beispielsweise in den Entwicklerwerkzeugen (D ...
Ein Beweis für das Konzept, um Sass schneller zu machen
Apr 16, 2025 am 10:38 AM
Zu Beginn eines neuen Projekts erfolgt die SASS -Zusammenstellung im Blinzeln eines Auges. Dies fühlt sich gut an, besonders wenn es mit Browsersync kombiniert ist, das nachlädt
Wie kann in der Front-End-Entwicklung CSS und JavaScript verwendet werden, um Suchlight-Effekte ähnlich wie die Schnittstelle zwischen Windows 10 Einstellungen zu erzielen?
Apr 05, 2025 pm 10:21 PM
So implementieren Sie Windows-ähnlich in der Front-End-Entwicklung ...
Wie wir eine statische Site erstellt haben, die Tartan -Muster in SVG erzeugt
Apr 09, 2025 am 11:29 AM
Tartan ist ein gemustertes Tuch, das normalerweise mit Schottland verbunden ist, insbesondere mit ihren modischen Kilts. Auf Tartanify.com haben wir über 5.000 Tartan gesammelt
