vue-init。 npm run unit時無法解析字體

Question

我有使用webpack和測試使用vue-init創建的項目

我在項目中添加了使用“ icomoon”創建的自定義字體，如下所示

在main.js ：

import './main.scss'

在main.scss ：

@import './assets/fonts/icons/style.scss';

在style.scss

@import 'variables';

@font-face {
  font-family: 'icomoon';
  src:
    url('#{$icomoon-font-path}/icomoon.ttf') format('truetype'),
    url('#{$icomoon-font-path}/icomoon.woff') format('woff'),
    url('#{$icomoon-font-path}/icomoon.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
...

並在variables.scss

$icomoon-font-path: './assets/fonts/icons/fonts' !default;
...

項目結構如下所示：

src
|-assets
| |-fonts
| |   icons
| |   |-fonts
| |   | |-icomoon.svg
| |   | |-icomoon.ttf
| |   | |-icomoon.woff
| |   |-style.scss
| |   |-variables.scss
| |-...
|-...
|-main.js
|-main.scss
|-...

當我嘗試執行npm run unit ，收到如下錯誤：

...

ERROR in ./node_modules/css-loader?{"minimize":false}!./node_modules/sass-loader/lib/loader.js?{}!./src/assets/fonts/icons/style.scss
Module not found: Error: Can't resolve './assets/fonts/icons/fonts/icomoon.woff' in '/Users/administrator/projects/front-end-landing/src/assets/fonts/icons'
 @ ./node_modules/css-loader?{"minimize":false}!./node_modules/sass-loader/lib/loader.js?{}!./src/assets/fonts/icons/style.scss 6:188-238
 @ ./src/assets/fonts/icons/style.scss
 @ ./src ^\.\/(?!main(\.js)?$)
 @ ./test/unit/index.js

...

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: Cannot find module "./assets/fonts/icons/fonts/icomoon.ttf"
  at http://localhost:9877webpack:///src/assets/fonts/icons/style.scss:6:0 <- index.js:39212

但是同時，如果我使用npm run dev運行項目，圖標可以正常工作，我可以看到它們並且它們已成功加載

所以，我的問題是，我做錯了什么，為什么當我嘗試運行測試時，無法正確加載圖標？

Answer 1

在這里找到解決方案

實際上，解決方案-包括這樣的字體

$font_path: '~@/assets/fonts/';

即~@/開頭