WebPack, react und css im Bundle

[Frank L. (Firma: Flk Consulting UG) (flk)]

Hallo Zusammen,

ich bräuchte ein wenig Hilfe bei folgender Aufgabenstellung.

Anwendungsbeschreibung:
Wir haben ein react GUI Bundle mit Komponenten von DevExtreme. Diese 
Komponenten benötigen eine größere Anzahl von CSS, Icon und Font Files.

Das Bundle wird nicht beim Start der Anwendung geladen sondern erst 
dann, wenn eine bestimmte Aktion per Button Click angefordert wird.

Aktuell laden wir die CSS Dateien zu dem Zeitpunkt wo das Bundle 
angefordert wird per Code in den Browser.

Umgebung ist ein SharePoint Online Tennant, die Anwendung wird in einem 
clientseitigen Webpart gerendert.

Anforderung:
Auf Grund der hohen Anzahl der Dateien ist das Deployment fehleranfällig 
und wir würden es gerne vereinfachen.

Wir haben deshalb die CSS, Icon und Font Files mit ins Bundle 
aufgenommen.

Fehler:
Wir schaffen es leider nicht, dass beim Laden des Bundle automatisch 
auch die CSS Files im Browser so bereitgestellt werden, dass die 
Komponenten diese verwenden können.

Ich bräuchte mal den ein oder anderen Tipp wo ich nachlesen kann wie ich 
da weiterkomme.

Gruß
Frank

[Frank L. (Firma: Flk Consulting UG) (flk)]

Lösung gefunden:

Ich muss tatsächlich das CSS File mit require laden. Das alleine reicht 
aber nicht. Die Variable in diesem Fall css muss auch verwendet werden, 
sonst wird sie einfach wegoptimiert.

const css = require('devextreme/dist/css/dx.fluent.saas.light.compact.css');
if (css) {}

Da das CSS File auch Font und Icon Files benötigt, musste ich meine 
WebPack Config etwas anpassen damit auch diese Files mit in das Bundle 
geladen werden.

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/inline',
},

Verwendet wird WebPack 5.88

Gruß
Frank