Ich versuche, eine externe Referenz zu einer CSS-Datei in Angular2 mit Webpack hinzuzufügen. Mein CSS ist definiert als
%Vor%in meiner Datei webpack.config.js, und ich kann css einfach in einem Kopf einer Typoskript-Datei laden:
%Vor%Wenn ich jedoch versuche, eine CSS-Datei innerhalb einer Komponente wie folgt zu laden:
%Vor%Ich bekomme einen Fehler von: AUSNAHME: TypeError: s.replace ist keine Funktion
Ich habe auch versucht, CSS über:
zu laden %Vor%aber nicht viel Glück
jede Hilfe ist willkommen
Grüße
Sean
Meine aktuelle Lösung für WebPack 2 mit Angular 2 für css oder scss Loader;
%Vor%Plugins:
%Vor%Und jetzt können Sie Folgendes in Ihrer Komponente verwenden
%Vor%Meine aktuellen Dev-Abhängigkeiten sind:
%Vor%Aktualisieren Für Webpack 2.2.1 und Extract-Text-Webpack-Plugin 2.0.0-rc.3 funktioniert die obige Lösung nicht mehr.
zusätzliche devdependencies
%Vor%Sie müssen eine postcss.config.js in Ihrem root Ihrer App mit dem Inhalt
hinzufügen %Vor%und die neue Regel für scss ist die folgende
%Vor% Ich habe eine Antwort für die ähnliche Frage gepostet, ich hoffe, es wird Ihnen helfen zu verstehen, wie die styles/styleUrls in angular2 funktioniert. Es gibt ein Stück Code, den ich bewiesen habe, um CSS über die Komponente an die Anwendung anzuhängen.
Module, die Sie installieren müssen:
css-loader style-loader und optional, aber empfohlen url-loader
Änderungen an Ihrer Webpack-Konfiguration ( Entwicklung )
module: {
loaders: [
// CSS
{
test: /\.css$/,
loader: "style-loader!css-loader",
}, /* rest of your loaders */
]
Fügen Sie in Ihrer JavaScript-Hauptdatei Ihre CSS-Datei
ein import '../css/bootstrap.min.css';
Jetzt, insbesondere beim Bootstrapping, erhalten Sie folgende Fehler:
FEHLER in ./~/css-loader!./client/css/bootstrap.min.css Modul nicht gefunden: Fehler: Modul 'url-loader' kann nicht aufgelöst werden @ ./~/css-loader!./client/css/bootstrap.min.css 6: 3278-3330 6: 3348-3400
FEHLER in ./~/css-loader!./client/css/bootstrap.min.css Modul nicht gefunden: Fehler: Modul 'url-loader' kann nicht aufgelöst werden @ ./~/css-loader!./client/css/bootstrap.min.css 6: 3449-3503
FEHLER in ./~/css-loader!./client/css/bootstrap.min.css Modul nicht gefunden: Fehler: Modul 'url-loader' kann nicht aufgelöst werden @ ./~/css-loader!./client/css/bootstrap.min.css 6: 3533-3586
In diesem Fall müssen Sie die erwähnten Dateien lokal herunterladen
und fügen Sie diesen Eintrag zu Ihrer Webpack-Konfiguration hinzu (in "loaders" section wie die erste oben)
Das ist der Grund, warum Sie das Paket url-loader installieren müssen, aber es ist nur erforderlich, wenn Ihre CSS andere Bild / Schriftart-Dateien verwendet.
Hinweis:
Anscheinend ist es für den Produktionseinsatz besser, ein komplizierteres Setup zu verwenden, das ExtractTextPlugin enthält, das von @squadwuschel
Hier finden Sie alle Details, die Sie benötigen könnten Ссылка
Tags und Links angular typescript webpack