解决使用Webpack打包Awesome-fonts时Can’t resolve ‘../webfonts/fa-regular-400.eot’
本文最后更新于 1230 天前,其中的信息可能已经有所发展或是发生改变。

在使用 Webpack过程中你可能会遇到以下情况

20210622212757.png

经过查找stackoverflowGithub-vuejs-templates-webpackGithub-JeffreyWay-laravel-mix

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/v4-shims';

修改后发现

20210622212806.png

但是我知道他上一个问题已经解决了

这个是新的一个问题:Webpack无法解析 woff2 eot svg等等文件

于是修改 Webpack.config.js文件

module->rules下添加

{
    test: /\.(ttf|eot|svg|gif|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    use: [{
        loader: 'file-loader',
    }]
},

然后重新打包

20210622212817.png

20210622212824.png

看到这满屏绿,我就知道这个问题解决了!

上一篇
下一篇