Webpack : SASS (글리프콘)에서 @ font-face에 대한 URL을 덮어 씁니다.

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 

,이 node_modules/glyphicons-halflings/scss/glyphicons-halflings/_glyphicons-halflings.scss에 정의 된 URL이 제대로

_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은

01을 정의합니다.

@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은 glyphicons-halflings 모듈에 정의 된 URL을 확인할 수 없습니다.

이 두 파일은 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.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 패키지 glyphicons-halflings 1.9.0은 (URL이 잘못 되었기 때문에) 덮어 쓰는 데 문제가있는 @font-face을 정의합니다. 모든 SASS, webpack 로더 파이프 라인은 glyphicons-halflings 패키지 사용을 중지했습니다. 'style', 'css?sourceMap', 'resolve-url', 'sass?sourceMap'

Answer 1

대신 내 코드 옆에 내용을 복사하고 경로를 변경했습니다.

내 생각에 webpack sass-loader은 각각 require(…)을 평가합니다. glyphicions-halflings 패키지는 평가를 통과하지 못합니다.