gibt es eine Möglichkeit, CSS-Datei mit Webpack

Question

dynamisch zu laden Webpack hat eine Code-Splitting-Feture (verwenden Sie require.ensure oder System.import), die uns dynamisch laden unsere js-Dateien. Aber ich möchte wissen, ob es eine Möglichkeit gibt, CSS-Datei dynamisch zu laden?

Es ist so komisch, da ich meine js-Dateien dynamisch lade, während ich meine CSS-Dateien nur einmal lade.

In meinem Projekt, ich meine CSS-Dateien in separaten Einträgen und verwenden Sie extractTextPlugin, um sie als eine zusätzliche CSS-Dateien zu kompilieren. Und laden Sie sie in Link-Tag.

Answer 1

Sie können, aber sie werden nicht als CSS-Dateien geladen (mit ExtractTextPlugin), sondern von JS, mit Style-Loader (das ist völlig in Ordnung) injiziert.

Es gibt nur ein paar Dinge zu tun. Stellen Sie sicher, dass Sie Ihre CSS/SASS/LESS/...- Loader korrekt eingerichtet haben. Wenn ExtractTextPlugin bereits funktioniert, sind Sie in diesem Punkt gut. Stellen Sie außerdem sicher, dass Sie fallbackLoader auf style-loader (und allChunks auf den Standard: false gesetzt) ​​in Ihrem ExtractTextPlugin.extract({}) Loader festgelegt haben.

An diesem Punkt verwenden Sie einfach require.ensure oder System.import, um Ihre CSS-Dateien genau so zu importieren/zu importieren, wie Sie es mit Code tun würden. Dank der Magie von Webpack werden die Dinge auf magische Weise funktionieren!

Answer 2

Ich habe die folgende Konfiguration erfolgreich verwendet, um Stile dynamisch für verschiedene Mandanten zu laden.

https://github.com/shiranGinige/react-redux-starter-with-login/blob/master/README.md