如何使Font Awesome 5与Webpack一起使用 [英] How to make Font awesome 5 work with webpack

问题描述

我正在我的Flask/webpack项目中尝试使用Fontawesome.

I'm trying to use Fontawesome in my Flask/webpack project.

最疯狂的事情是它可以正常工作，然后停止工作，我改变了一些愚蠢的方法，再次工作，最后完全停止工作.

The craziest thing is some point it worked then stopped, I changed something stupid, it worked again and finally it stopped working completely.

我所拥有的:

程序包配置:

  "devDependencies": {
        ...
        "css-loader": "^1.0.0",
        "node-sass": "^4.9.3",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.0",
        "webpack": "^4.19.0",
        "webpack-cli": "^3.1.0",
        "webpack-merge": "^4.1.4"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.3.1",
        "bootstrap": "^4.1.3",
         ...
    }

webpack配置(规则部分):

webpack config (rules section):

   test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [{
            loader: 'file-loader',
            options: {
            name: '[name].[ext]',
            outputPath: '../fonts/',  
            publicPath: '../static/fonts' 
            }
        }]
    },
    {
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader',
            'sass-loader'
        ]
    },
    {
        test: /\.scss$/,
        use: [
            "style-loader", 
            "css-loader", 
            "sass-loader" 
        ]
    },

webpack，输入部分:

webpack, entry section:

entry: {
        myStyles: './stles/myStyles.js'
    },

myStyles.js:

myStyles.js:

import fontawesome from "@fortawesome/fontawesome-free/scss/fontawesome.scss";
import regular from "@fortawesome/fontawesome-free/scss/regular.scss";
import solid from "@fortawesome/fontawesome-free/scss/solid.scss";
import brands from "@fortawesome/fontawesome-free/scss/brands.scss";

fontawesome.library.add(solid, regular, brands) 

最后一行虽然导致了Chrome中的错误:

The last line though caused the error in Chrome:

Uncaught TypeError: Cannot read property 'add' of undefined

我还尝试将导入内容添加到我的条目scss中，并且在某些时候起作用了，然后停止了:

I also tried to add imports into my entry scss and it worked at some point, then stopped:

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

因此，终于在我的模板中有了:

So, finally in my template I have:

<i class="fas fa-user-circle fa-fw"></i>

我看到的只是正方形.

我检查了Chrome，加载了字体(ttf，woff，woff2).

I checked Chrome, fonts are loaded (ttf, woff, woff2).

请帮助.我已经在这个问题上浪费了超过6(!!!!)个小时，这比我在与Webpack相关的其他事情上花费的时间还多.

Please help. I already spent more than 6(!!!!) hours wasted on this problem and it's more than I spent on anything else related with webpack.

UPD我想我已经知道了.我发现我的公共路径是错误的，我的意思是webpack配置的这一部分:publicPath:'../static/fonts'-当前指向HTML上一级的static/fonts文件夹.首先，相对路径本身是错误的，其次，相对路径不适用于其他文件夹，第三，我已将其更改为相对于根目录的相对路径:"/static/fonts"，并且有效.

UPD I think I figured it out. I found that my public path was wrong, I mean this part of webpack config: publicPath: '../static/fonts' - it currently points to the static/fonts folder one level up from my html. First of all, relative path is wrong per se, secondly, a relative path will not work for other folders, third, I've changed it to the relative to the root: '/static/fonts' and it worked.

推荐答案

在我的项目中( HTML入门与 webpack 4 .26.1)，我通过两个变体添加了FontAwesome:

In my project (HTML Starter with webpack 4.26.1) I added FontAwesome via two variants:

我刚刚安装了 FontAwesome免费( v5.5.0 )

I just installed FontAwesome Free (v5.5.0)

npm install --save-dev @fortawesome/fontawesome-free

，然后我添加到了 index.js

and I added to index.js

import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/brands'

源代码/提交

2.与API/SVG一起使用

我已安装FontAwesome (svg-core，brands-icons，regular-icons，solid-icons)

2. Used with the API / SVG

I installed FontAwesome (svg-core, brands-icons, regular-icons, solid-icons)

npm install --save-dev @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

然后我将其添加到JS文件中

and I added to JS file

import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab) 

dom.i2svg() 

带有注释的源代码/提交

这篇关于如何使Font Awesome 5与Webpack一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！