App sieht anders aus und verhält sich nach dem Bündeln mit Webpack

Ich habe kürzlich mein Angular 2-Projekt von SystemJS nach Webpack verschoben, wobei ich die neueste Version von Angular2-CLI verwendet habe. Die Projektdateien wurden kaum geändert, und nur kleine Änderungen innerhalb des Angular2-Codes wurden vorgenommen, um das Projekt in die neue Umgebung einzupassen.App sieht anders aus und verhält sich nach dem Bündeln mit Webpack

Jetzt jedoch, wenn ich mit der CLI bündeln und es ausführen, bekomme ich einige seltsame Verhaltensweisen auf das Design der Seite. Ich habe die Stile beider Seiten verglichen und sie sind 1 zu 1 identisch, was bedeutet, dass etwas mit Webpack oder der CLI mit dem Erscheinungsbild und der Struktur der Website zu tun hat.

Quelle

2016-10-05 fingeron

Können wir mindestens den Mindestcode haben, der erforderlich ist, um dieses Verhalten zu reproduzieren? Bestimmte CLI-Versionen und Abhängigkeiten sind sehr wichtig. Verwenden Sie auch einen CSS-Preprozessor wie SASS oder CSSNext? – gelliott181

Die Webpack-Version verfügt nicht mehr über ein Herstellerverzeichnis, so dass relative Skript-Tags für Bibliotheken von Drittanbietern nicht mehr funktionieren. Sie müssen ändern, wie Ihre Drittanbieter-Bibliotheken enthalten sind. Importieren Sie entweder Ihre Bibliotheken (css und js) oder weisen Sie angular-cli an, um sie als Teil der Konfiguration zu laden. Siehe https://github.com/angular/angular-cli#3rd-party-library-installation und https://github.com/angular/angular-cli#global-library-installation

Quelle

2016-10-05 23:31:15 shusson

Das Design bezieht sich nicht auf irgendeine Bibliothek von Drittanbietern, es soll alles einfache CSS sein (geschrieben von mir und kein offener Quellcode). Auch das Problem, das mich zu dieser Frage gebracht hat, ist, dass ich zwischen der Website vor dem Webpack-Bundle (mit systemjs) und nach dem Webpack-Bundle, und obwohl ** jede Zeile von CSS ähnlich ist **, die Website anders sieht und vergleicht einige Verhaltensweisen (wie scroll) sind _gone_! – fingeron

wie schließt du dein css ein? – shusson

@Component ({... styleUrls: ["file.scss"] ...}) – fingeron

App sieht anders aus und verhält sich nach dem Bündeln mit Webpack

Antwort

Verwandte Themen