Question

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

我尝试通过在我的defaults.scss文件中引用style.css从我下载的文件夹中访问类似demo文件的字体，我在其中导入了所有样式表但是我收到此错误：

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]') } 
}

Answer 1

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

您的相对路径正确吗？

Answer 2

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

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

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

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

2 个答案: