Javascript 从SASS文件导入npm包（带字体）

我想直接作为模块导入

简单线条图标

，并将前缀

$simple line icon prefix

更改为其他内容

我创建了一个测试项目：

vue create foobar
cd foobar
npm install -D sass-loader sass
npm install -D simple-line-icons

然后将导入指令添加到

main.js

：

import Vue from 'vue'
import App from './App.vue'    
import 'simple-line-icons/scss/simple-line-icons.scss'

Vue.config.productionTip = false    
new Vue({ render: h => h(App) }).$mount('#app')

那么我的组件就是这样：

<template>
  <div id="app">Hello <i class="icon-people"></i> world</div>
</template>

然后在

main.js

：

import./main.scss'

中相应地替换导入

现在我对字体有一个问题：

These relative modules were not found:

* ../fonts/Simple-Line-Icons.eot?v=2.4.0 in ./node_modules/css-loader/dist/cjs.js??
ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/
sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/main.scss

如何从scss导入npm包

编辑

我可以通过以下方式更改字体路径：

$simple-line-font-path: "~simple-line-icons/fonts/";
@import '~simple-line-icons/scss/simple-line-icons.scss'

---

然后我没有任何错误，但是字体没有加载到浏览器中：（

是src目录中的main.scss吗？是的，它在src目录中的App.vue和main.jsis main.scss旁边？是的，它在App.vue和main.js旁边

$simple-line-font-path: "~simple-line-icons/fonts/";
@import '~simple-line-icons/scss/simple-line-icons.scss'