无法使用 webpack 导入 icomoon 自定义字体答案

【问题标题】：can't import icomoon custom font with webpack无法使用 webpack 导入 icomoon 自定义字体
【发布时间】：2018-07-14 14:48:37
【问题描述】：

我使用 icomoon.io 从我上传的 svg 生成自定义字体。我下载了字体文件夹。我正在使用一个 vue cli 预建项目。

我尝试通过在我的 defaults.scss 文件中引用 style.css 来从我下载的文件夹中访问类似演示文件的字体，在该文件中我导入了我的所有样式表，但出现此错误：

Failed to compile with 4 errors                                                                                                                                                          19:04:44

These relative modules were not found:

* ./fonts/icomoon.eot?8j65w9 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./n
ode_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
* ./fonts/icomoon.svg?8j65w9 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./n
ode_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
* ./fonts/icomoon.ttf?8j65w9 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./n
ode_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
* ./fonts/icomoon.woff?8j65w9 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./
node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue

我并没有对 vue 模板中的 webpack 配置进行太多改动。但这里是与字体相关的规则。我应该改变什么

{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader', options: { limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } 
}

【问题讨论】：

感谢@TomasBy 的耐心等待。这是我的第一个问题：D
我也有同样的问题。你是做什么的？

标签： webpack vue.js vuetify.js vue-cli

【解决方案1】：

我也遇到了这个问题，不过我通过在style.css中将fonts/修改为../fonts/解决了

你的相对路径正确吗？

【讨论】：

【解决方案2】：

通过创建新文件“vue.config.js”并添加内容来解决问题 ->

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                prependData: `@import "~@/assets/styles/scss/_fonts.scss";`
            }
        }
    }
};

然后在 _fonts.scss 中更改字体的 url ->

@font-face { 
    font-family: 'icomoon';
    src:  url('~@/assets/fonts/icomoon.eot?5jv8om');
    src:  url('~@/assets/fonts/icomoon.eot?5jv8om#iefix') format('embedded-opentype'),
      url('~@/assets/fonts/icomoon.ttf?5jv8om') format('truetype'),
      url('~@/assets/fonts/icomoon.woff?5jv8om') format('woff'),
      url('~@/assets/fonts/icomoon.svg?5jv8om#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

【讨论】：