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

Posted 2023-02-22

【中文标题】无法使用 webpack 导入 icomoon 自定义字体

【英文标题】：can't import icomoon custom font with webpack

【发布时间】：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

我也有同样的问题。你是做什么的？

【参考方案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;