2015-06-10 5 views
8

Mein Problem ist, dass wenn ich nicht die vollständige Domäne in output.publicPath Konfigurationsoption angeben; dann wird die URL nicht richtig geladen (zumindest Schriftarten).Webpack: Muss ich die Domäne in publicPath angeben, damit die Direktive url() in CSS funktioniert?

Meine webpack config:

output: { 
    ... 
    publicPath: '/assets/' 
}, 
module: { 
    loaders: { 
    { 
     test: /\.less$/, 
     loader: "style!css?sourceMap!less?sourceMap" 
    }, 
    { 
     test: /\.(png|jpg|svg|gif|eot|woff|ttf)$/, 
     loader: 'file-loader?name=[path][name]-[hash].[ext]' 
    } 
    } 
}, 
debug: true, 
devtool: 'eval' 

Ich habe eine weniger Datei, die besagt:

@font-face { 
    font-family: 'new-sources'; 
    src: url('../../fonts/sources-icons-rev-4.eot'); 
    ... 
} 

Mein Server in http://localhost:5000 ist.

Wenn ich das erzeugte CSS überprüfen, während das Debuggen in Chrom ich sehe, dass es durch ersetzt wurde:

@font-face { 
    font-family: 'new-sources'; 
    src: url(/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot); 
    ... 
} 

Welche scheint richtig! Aber funktioniert nicht Chrome-Dev-Tools melden einen Fehler: "Konnte heruntergeladene Schriftart nicht dekodieren: http://localhost:5000/widgets/damian/9789/en" Zeigt an, dass es versucht, eine Schriftart, die URL zu laden, aber diese URL ist mein aktueller Standort, wo ich den HTML-Dienst. Und ich weiß nicht, warum versucht, die Schriftart von dieser URL abzurufen.

Wenn ich gehe zu: http://localhost:5000/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot. Es klappt.

Alles ist gelöst, wenn ich den publicPath ändern: 'http://localhost:5000/assets/'. Aber das ist etwas, was ich vermeiden möchte, und auf jeden Fall möchte ich verstehen, warum das passiert.

Meine Vermutung, ist, dass seit der Stil-Lader, fügen Sie die CSS als Blob, dass CSS das Konzept der "aktuellen Domäne" verliert also urls, die keine Domain drin haben, seltsam handeln.

Aber gleichzeitig sollte dies für jeden passieren, der webpack mit CSS benutzt, und ich habe keinen Kommentar dazu gesehen. : S

Danke !!!

Antwort

8

Es gefunden. Danke an @diunarlist auf webpack's gitter.

Es ist, weil ich SourceMap mit Style-Loader verwendet habe. Überprüfen https://github.com/webpack/style-loader/issues/55

Mit source-maps, style loader verwendet einen Blob, so dass absolute URLs funktioniert.

Ohne source-maps wird ein Inline-Style-Tag verwendet, daher gibt es kein Problem.

Verwandte Themen