Wie packe ich CSS-Dateien? So packen Sie CSS-Dateien

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man CSS-Dateien packt. Die Methode zum Packen von CSS-Dateien hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

CSS-Dateipaketierung

Loader sind eine der wichtigsten Funktionen von Webpack. Verschiedene Loader können verwendet werden, um verschiedene Dateiformate gezielt zu verarbeiten.

Loader sind im Modul Modul

Hier sind ein paar Beispiele für die Verwendung von Loadern:

• Sie können das Schreiben von SASS-Dateien in CSS konvertieren, ohne andere Konvertierungstools zu verwenden .

• Kann ES6- oder ES7-Code in JS-Code konvertieren, der mit den meisten Browsern kompatibel ist.

• kann JSX in React in JavaScript-Code konvertieren.

Hinweis: Alle Loader müssen separat in npm installiert und in webpack.config.js konfiguriert werden. Sehen wir uns kurz die Konfigurationstypen von Loadern an.

Test: ein Ausdruck, der mit der Erweiterung der verarbeiteten Datei übereinstimmt.
Verwenden Sie: Loader-Name, der der Name des Moduls ist, das Sie verwenden möchten Option auch Konfiguration muss durchgeführt werden, sonst wird ein Fehler gemeldet;
einschließen/ausschließen: Dateien (Ordner) manuell hinzufügen, die verarbeitet werden müssen, oder Dateien (Ordner) blockieren, die nicht verarbeitet werden müssen (optional); >Abfrage: Zusätzliche Informationen für Lader bereitstellen. Optionen festlegen (optional)

Paket-CSS-Datei Erstellen Sie einen CSS-Ordner im src-Verzeichnis und erstellen Sie die Datei index.css
im Ordner ./src/css/index.css

 body{
      background-color: red;     
      color: white; 
      }

Nachdem die CSS-Datei erstellt wurde, wird sie benötigt zum Importieren Es kann nur in die Eintragsdatei gepackt werden. Hier führen wir es in Eintrag.js ein. Fügen Sie den Code in der ersten Zeile von /src/entery.js hinzu:

import css from './css/index.css';

Nachdem das CSS und der Import abgeschlossen sind, müssen wir einen Loader zum Parsen der CSS-Datei verwenden, nämlich den Style-Loader und den CSS-Loader.

style-loader: Wird zur Verarbeitung von url() in CSS-Dateien usw. verwendet. Die URL in npm: https:/ / /www.npmjs.com/package/style-loader

Verwenden Sie npm install, um das Projekt zu installieren: Seien Sie vorsichtig bei der Installation von Style-Loader und CSS-Loader, ihre Codes sind unterschiedlich

npm install style-loader –save-dev

css-loader: Wird zum Einfügen von CSS in verwendet Seitenstil-Tag. URL in npm: https://www.npmjs.com/package/css-loader
Verwenden Sie npm install, um das Projekt zu installieren:

npm install –save-dev css-loader

Nachdem beide Loader heruntergeladen und installiert wurden, können wir unsere Loader konfigurieren.

Loader-Konfiguration: webpack.config.js

module:{ 
    rules: [{ 
         test: /\.css$/, 
         use: [ 'style-loader', 'css-loader' ] 
     }] 
 },

Es gibt 3 Möglichkeiten, im Modul zu schreiben 1 : [ 'Style-Loader', 'CSS-Loader'
2. Loader:['Style-Loader','CSS-Loader']
3 >

Js- und CSS-Dateien auf der Website packen

Manchmal kann die Ressourcendatei nicht gefunden werden, nachdem das CSS-Referenzbild gepackt wurde

Das obige ist der detaillierte Inhalt vonWie packe ich CSS-Dateien? So packen Sie CSS-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!