WebPack, react und css im Bundle

Frank L. OP (Firma: Flk Consulting UG) #7571275
Lesenswert?
• ▲
▼

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

Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Frank L. OP (Firma: Flk Consulting UG) #7571444
Lesenswert?
• ▲
▼

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.

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

2
 
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.

1
 
{

2
 
    test: /\.(eot|svg|ttf|woff|woff2)$/,

3
 
    type: 'asset/inline',

4
 
},

Verwendet wird WebPack 5.88

Gruß Frank

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt. Bitte hier nur auf die ursprüngliche Frage antworten, für neue Fragen einen neuen Beitrag erstellen.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Dein Name und deine E-Mail-Adresse

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.