我正在尝试在我的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 配置文件(rules 部分):
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相关的任何其他事情上的时间都要长。
更新 我想我找到问题了。我发现我的公共路径是错误的,我的意思是webpack配置的这部分:publicPath: '../static/fonts' - 它目前指向从我的html文件夹上一级的static/fonts文件夹。首先,相对路径本身就是错误的,其次,相对路径对于其他文件夹也无效,第三,我将其更改为相对于根目录的路径:'/static/fonts',然后它就可以工作了。
yarn build
而不是yarn dev
来调试我的font-awesome / webpack-loaders问题。 - kca