Webpack: URL de remplacement pour @ font-face dans SASS (Glyphicons)

Question

J'ai importé "glyphicons-halflings": "1.9.0", qui ne contient pas les polices actuelles. Par conséquent les polices sont stockées par rapport à mon application dans app/assets/fonts.

Je traite avec des erreurs comme celle-ci:

ERROR in ./~/css-loader?sourceMap!./~/resolve-url-loader!./~/sass-loader?sourceMap!./app/scss/application.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.eot in C:\work\myapp\src\MyApp.Web\app\scss 
@ ./~/css-loader?sourceMap!./~/resolve-url-loader!./~/sass-loader?sourceMap!./app/scss/application.scss 6:168498-168550 6:168573-168625 

Pour moi, cela semble comme si l'URL définie dans node_modules/glyphicons-halflings/scss/glyphicons-halflings/_glyphicons-halflings.scss est pas correctement être écrasé

_glyphicons-halflings.scss définit

@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url('../fonts/glyphicons-halflings-regular.eot'); 
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
     url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
     url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
     url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); 
} 

Mes propres app/scss/_font.scss définit

@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url('../assets/fonts/glyphicons/glyphicons-halflings-regular.eot'); 
    src: url('../assets/fonts/glyphicons/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
     url('../assets/fonts/glyphicons/glyphicons-halflings-regular.woff2') format('woff2'), 
     url('../assets/fonts/glyphicons/glyphicons-halflings-regular.woff') format('woff'), 
     url('../assets/fonts/glyphicons/glyphicons-halflings-regular.ttf') format('truetype'), 
     url('../assets/fonts/glyphicons/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); 
} 

La seule différence entre ces deux sont les URL. Je définis un chemin relatif au _font.scss (ou plutôt, application.scss) mais webpack ne peut pas résoudre les URL définies dans le module glyphicons-halflings.

Ces deux fichiers sont importés dans le app/scss/application.scss:

@import "variables"; 
@import "mixins"; 
@import "~bootstrap/scss/bootstrap"; 
@import "~font-awesome/scss/font-awesome"; 
@import "~glyphicons-halflings/scss/glyphicons-halflings"; 
@import "bootstrap-override"; 
@import "libs-override"; 

@import "font"; 

J'ai mis en place webpack comme ceci: webpack.common.js

module: { 
    loaders: [ 
     { 
      test: /\.ts$/, 
      include: helpers.root('app'), 
      loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
     }, 
     { 
      test: /\.html$/, // mostly angular templates 
      include: helpers.root('app'), 
      loader: 'html' 
     }, 
     { 
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?|$)/, 
      include: helpers.root('app'), 
      loader: 'file?name=[path][name].[hash].[ext]'    
     }, 
     { 
      test: /\.scss$/, 
      include: helpers.root('app'), 
      loaders: ['style', 'css?sourceMap', 'resolve-url', 'sass?sourceMap'] 
     }, 
     { 
      test: /\.css$/, 
      include: helpers.root('app'), 
      loader: 'to-string!css!resolve-url' 
     } 
    ] 
}, 

Pour référence, ma structure de dossier est comme ceci:

+-- app 
| +-- assets 
|  +-- fonts 
|   +-- font-awesome 
|    +-- FontAwesome.otf 
|    +-- ... 
|   +-- glyphicons 
|    +-- ... 
|   +-- ... 
|  +-- icon 
|   +-- ... 
|  +-- ... 
| +-- sass 
|  +-- _font.css 
|  +-- application.scss 
|  +-- ... 
| +-- ... 
+-- appdist (later for server-side, if ever) 
+-- node_modules 
+-- ... 
+-- wwwroot 
    +-- dist 
     +-- ...webpack bundled content goes here... 

TL; DR package glyphicons-halflings 1.9.0 définit un @font-face que j'ai de la difficulté à remplacer (car les URL sont erronées). Tous les SASS, pipeline de chargeur Webpack est 'style', 'css?sourceMap', 'resolve-url', 'sass?sourceMap'

Answer 1

J'ai arrêté d'utiliser le package glyphicons-halflings. Je ai plutôt copié le contenu à côté de mon propre code et modifié les chemins.

Je suppose que webpack sass-loader évalue chaque require(…) séparément - et le paquet glyphicions-halflings ne réussit pas l'évaluation.