Wie man eine externe css-Datei mit Webpack und Angular2?
Ich versuche, fügen Sie eine externe Referenz auf eine CSS-Datei in Angular2 mit Webpack.
Mein css ist definiert als
{ test: /\.css$/, loader: "style-loader!css-loader" },
in meinem webpack.config.js Datei und ich kann laden css nur in Ordnung, wenn dabei in einem Kopf einer typescript-Datei:
require("./styles/style.css");
Jedoch wenn ich versuchen und laden Sie eine CSS-Datei inline innerhalb einer Komponente, wie in:
@Component({
selector: 'todo-list',
template: `
<section class="todoapp">
</section>
`,
styles: [require('./Todolist.css')], //<--------------
directives: [TodoItem],
providers: [TodosService]
...
Bekomme ich eine Fehlermeldung: EXCEPTION: TypeError: s.ersetzen Sie ist nicht eine Funktion
Ich habe auch versucht, laden von CSS über:
styles: [require('style-loader!css-loader!./Todolist.css')]
aber nicht viel Glück
jede Hilfe ist willkommen
hinsichtlich
Sean
- überprüfen Sie die webpack-starter für eine funktionierende Beispiel -> github.com/AngularClass/angular2-webpack-starter
- Haben Sie versucht, mit
[require('style-loader!css-loader!./Todolist.css').toString()]
? - scheint arbeiten, um mir wie hier stackoverflow.com/a/34963135/142372
Du musst angemeldet sein, um einen Kommentar abzugeben.
Was hat der trick war, laden css als unformatierten text in die webpack.config.js
hinsichtlich
Meine aktuelle Lösung für WebPack 2 bei Winkel 2 für die css-oder scss-Loader;
Plugins:
Und jetzt können Sie mit der folgenden, die in Ihrer Komponente
meine aktuelle DevDependencies sind:
Update
für Webpack 2.2.1 und Extrakt-text-webpack-plugin 2.0.0-rc.3 hier ist die Lösung oben funktioniert nicht mehr.
zusätzliche devdependencies
benötigen Sie ein postcss.config.js in Ihrer Wurzel von der app mit dem Inhalt
und die neue Regel für scss ist die folgende
Habe ich geschrieben eine Antwort auf die ähnliche Frage, ich hoffe, es wird helfen, mit Ihnen zu verstehen, wie die
styles/styleUrls
arbeitet in angular2. Es ist ein Stück code, den ich bewiesen zu append css auf die Anwendung durch Ihre Komponente.Laden externer css-style in den Winkel-2-Komponente
Module, die Sie brauchen würde, um zu installieren:
css-loader
style-loader
und optional, aber empfohlenurl-loader
Änderungen an Ihrem webpack config (Entwicklung)
module: {
loaders: [
//CSS
{
test: /\.css$/,
loader: "style-loader!css-loader",
}, /* rest of your loaders */
]
In Ihrem Haupt-javascript-Datei fügen Sie Ihrem css-Datei
import '../css/bootstrap.min.css';
Jetzt im Fall von bootstrap insbesondere erhalten Sie Fehler wie diese:
In diesem Fall u wird müssen laden Sie die genannten Dateien lokal
und fügen Sie diesen Eintrag in Ihrem webpack config (innen
"loaders"
Abschnitt wie der erste oben)Dies ist der Grund, warum u installieren müssen url-loader-Paket, sondern es ist nur erforderlich, wenn Ihre css-verlassen Sie sich auf andere Bild - /Schrift-Dateien.
Hinweis:
Scheinbar für die Produktion verwenden, es ist besser ein komplizierter setup beinhalten
ExtractTextPlugin
erwähnt von @squadwuschelHier finden Sie alle details, die Sie vielleicht brauchen
https://webpack.github.io/docs/stylesheets.html