javascript - 从 SASS 文件中导入 npm 包（带有字体）

Question

我想simple-line-icons直接作为模块导入并将前缀更改$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>

这项工作很好，但我想将一个变量更改为scss文件，所以我创建了一个main.scss

$simple-line-icon-prefix: "foobar-";    
@import 'simple-line-icons/scss/simple-line-icons.scss'

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'

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

标签： javascriptvue.jswebpacksassfonts