Question

我有项目，使用vue-init使用webpack和测试

创建

我将使用“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

找到解决方案here

实际上，解决方案 - 包括这样的字体

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

即。 ~@/开头

VUE-INIT。 npm运行单元时无法解析字体

1 个答案: