Webpack: переписывание url для @ font-face в SASS (Glyphicons)

Question

Я импортировал "glyphicons-halflings": "1.9.0", который не содержит фактических шрифтов. Поэтому шрифты сохраняются относительно моего приложения в app/assets/fonts.

Я имею дело с ошибками, такие как это:

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 

Ко мне это кажется, если URL определено в node_modules/glyphicons-halflings/scss/glyphicons-halflings/_glyphicons-halflings.scss не правильно перезапись

_glyphicons-halflings.scss определяет

@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'); 
} 

Мой собственный app/scss/_font.scss определяет

@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'); 
} 

Единственная разница между этими двумя - это URL-адреса. Я определяю относительный путь к _font.scss (вернее, application.scss), но webpack не может разрешить URL-адреса, определенные в модуле glyphicons-halflings.

Оба эти файлы импортируются в 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"; 

Я настроил Webpack так: 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' 
     } 
    ] 
}, 

Для справки, моя структура папок, как это:

+-- 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 определяет @font-face, который у меня возникнут проблемы с перезаписью (потому что неправильные URL-адреса). Весь трубопровод SASS, webpack loader 'style', 'css?sourceMap', 'resolve-url', 'sass?sourceMap'

Answer 1

Я прекратил использование пакета glyphicons-halflings. Вместо этого я скопировал содержимое рядом со своим собственным кодом и изменил пути.

Я предполагаю, что webpack sass-loader оценивает каждый require(…) отдельно - и glyphicions-halflings упаковка не проходит оценку.