【发布时间】：2021-05-05 00:58:55
【问题描述】：
我正在尝试在我的 Flask/webpack 项目中使用 Fontawesome。
最疯狂的事情是它在某个点起作用然后停止了，我改变了一些愚蠢的东西，它再次起作用，最后它完全停止了。
我有什么：
包配置：
"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 配置（规则部分）：
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，入口部分：
entry: {
myStyles: './stles/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 中的错误：
Uncaught TypeError: Cannot read property 'add' of undefined
我还尝试将导入添加到我的条目 scss 中，它在某个时候起作用，然后停止了：
$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";
所以，终于在我的模板中：
<i class="fas fa-user-circle fa-fw"></i>
而我看到的只是正方形。
我检查了 Chrome，字体已加载（ttf、woff、woff2）。
请帮忙。我已经在这个问题上浪费了超过 6(!!!!) 小时，这比我花在与 webpack 相关的任何其他事情上的时间都多。
UPD 我想我明白了。我发现我的公共路径错误，我的意思是 webpack 配置的这一部分： publicPath: '../static/fonts' - 它当前指向我的 html 上一级的 static/fonts 文件夹。首先，相对路径本身是错误的，其次，相对路径不适用于其他文件夹，第三，我已将其更改为相对于根目录的相对路径：'/static/fonts' 并且有效。
【问题讨论】：
-
有没有找到用scss导入的解决方案？
-
@white_gecko 我的路径有误，请参阅问题的更新。
-
关于不一致的“它工作”，“它停止工作”行为：我不得不
yarn build而不是yarn dev来调试我的 font-awesome / webpack-loaders 问题。
标签： webpack font-awesome