Was soll ich tun, wenn der von Raw-Lader eingeführte HTML-Datei-Tailwind-CSS-Stil beim Verpacken von Webpack verloren geht?

Webpack und Tailwind CSS Kombinieren: Lösen Sie das Problem der fehlenden HTML-Dateistile, die von Raw-Loader eingeführt wurden

Wenn Sie WebPack zum Verpacken von Projekten verwenden, stoßen Sie häufig auf das Problem, dass der von Rohlader eingeführte Tailwind-CSS-Stil in der HTML-Vorlagendatei nicht korrekt verpackt werden kann. In diesem Artikel wird dieses Problem analysiert und gelöst.

Problem: Der Entwickler verwendet Raw-Loader, um HTML-Dateien (z. ./base/header.html ) zu laden, die die Names zur CSS-Klasse von Tailwind-CSS enthält. Nachdem das Webpack verpackt ist, werden diese Klassennamen nicht korrekt verarbeitet, was zu fehlenden Stilen führt. Die WebPack-Konfiguration hat MiniCssExtractPlugin CSS und postcss-loader korrekt eingerichtet, um PostCSS-Plugins (z. B. autoprefixer) zu verarbeiten, aber das Problem löst immer noch nicht.

Ursache: WebPack analysiert den CSS-Klasse-Namen nicht in der von Rohlader geladenen HTML-Datei. Die purge von Rückenwind -CSS muss wissen, welche HTML -Dateien Klassennamen enthalten, um Code zu optimieren und zu entfernen. Daher müssen Sie in tailwind.config.js den Pfad der HTML -Datei angeben, die über die purge analysiert werden soll.

Lösung: Ändern Sie die Datei tailwind.config.js und fügen Sie der Option " purge den HTML -Dateipfad hinzu:

 module.exports = {
  Spülung: ['src/*. html', 'src/base/*. html'],
  DarkMode: Falsch, // oder 'Medien' oder 'Klasse'
  Thema: {
    verlängern: {},
  },
  Varianten: {
    verlängern: {},
  },
  Plugins: [],
};

Durch Hinzufügen von 'src/base/*.html' kann die purge von Railwind -CSS den Packwind -CSS -Klasse -Namen in der Datei ./base/header.html erkennen und verarbeiten, um sicherzustellen, dass der Stil korrekt in die endgültige CSS -Datei verpackt ist. Bitte passen Sie den Pfad entsprechend der tatsächlichen Situation des Projekts an. Mit dieser Änderung können WebPack den Tailwind CSS -Klasse header.html korrekt identifizieren und in die endgültige generierte CSS -Datei einbeziehen.

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn der von Raw-Lader eingeführte HTML-Datei-Tailwind-CSS-Stil beim Verpacken von Webpack verloren geht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!