webpack3解决font awesome找不到字体（webpack引入font awesome）

最新推荐文章于 2023-08-16 22:19:38 发布

原创最新推荐文章于 2023-08-16 22:19:38 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #font awesome #找不到图标

个人同时被 3 个专栏收录

77 篇文章

订阅专栏

笔记

43 篇文章

订阅专栏

webpack

7 篇文章

订阅专栏

本文介绍了如何通过调整Webpack配置解决Font Awesome图标加载失败的问题。关键在于将file-loader的useRelativePath设置为true，以便使用相对路径加载资源，避免了打包时引入绝对URL导致的错误。

看了N个网页都没解决，最后吧file loader的useRelativePath设置为true解决了。看了一下，该属性是生成一个相对 url ，难道之前打包的时候引入的都是绝对URL？这点求大佬指点。下面是引入font awesome的步骤。

1.下载font awesome

这是废话。我用的是CSS

2.引入font awesome

import '../../font-awesome/css/font-awesome.min.css';

3.webpack配置

{
                test: /\.(eot|svg|ttf|woff|woff2)\w*/,// font awesome loader
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                        publicPath:'/fonts/',//打包到fonts文件夹
                        useRelativePath:true,//设置为相对路径
                        name:'[name].[ext]'
                    }
                  }
                ]               
            },{ 
                test: /\.(css)$/, //因为我其他文件用的都是less，这里把font awesome的css单独打包
                include:path.resolve(SRC_PATH, 'font-awesome'),
                use:fontCss.extract({
                        fallback: "style-loader",
                        use: [{
                            loader: "css-loader",
                        }]
                })
            }