我刚刚将我们项目中旧的CSS和JS构建过程从grunt（以及less中的CSS）迁移到了webpack 5（以及scss中的CSS），一切似乎都很好。然而，有一个问题：有时候它看起来不像这样
以下是在DevTools中查看心形图标的截图：
以下是我webpack配置的简化版（少了一些条目）：
以下是在DevTools中查看心形图标的截图：.fa-heart:before {
content: "";
}
Fontawesome字体似乎无法正确加载，而是以这种方式加载：
当我在DevTools中检查时，心形图标看起来像这样。
.fa-heart:before {
content: "";
}
我本来期望能看到
.fa-heart:before {
content: "\f004";
}
当我在DevTools中手动更改它时，它可以正常工作。
当我在浏览器中启动lighthouse审核时，可以重现此问题：当lighthouse完成最后一次加载时，它总是看起来像这样。
我真的不知道该如何解决这个问题。我尝试使用webfontloader来加载字体，但这并没有解决问题。
我在我的main.scss中这样包含fontawesome：
@import "~@fortawesome/fontawesome-pro/scss/fontawesome";
@import "~@fortawesome/fontawesome-pro/scss/light";
@import "~@fortawesome/fontawesome-pro/scss/solid";
以下是我webpack配置的简化版（少了一些条目）：
module.exports = {
entry: {
'./dist/styles.min': { import: './src/sass/main.scss' },
'./dist/scripts.min.js': { import: './src/js/scripts.js' },
}
module: {
rules: [
{
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
exposes: ["$", "jQuery", "jquery"],
},
},
{
test: /\.s?[ac]ss$/i,
use: [
// Compiles Sass to CSS
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: [["@babel/preset-env", { debug: false, useBuiltIns: "usage", corejs: 3 }], "@babel/preset-react"],
plugins: [["@babel/plugin-transform-runtime", { corejs: 3 }]],
},
},
},
{
test: /(ignore)/,
use: {
loader: "ignore-loader",
},
},
{
test: /\.(png|jpe?g|gif|svg|ttf|eot|woff2?)$/i,
use: [
{
loader: "file-loader",
options: {
outputPath: "dist/assets/",
publicPath: "/assets/",
},
},
],
},
]
},
output: {
path: __dirname,
filename: "[name]?[contenthash]",
},
resolve: {
extensions: [".jsx", ".js", ".json"],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css?[contenthash]",
}),
],
optimization: {
minimize: !DEV_MODE,
minimizer: [
"...",
new TerserPlugin({ extractComments: false }),
new CssMinimizerPlugin(),
],
splitChunks: {
cacheGroups: {
polyfills: {
test: /[\\/]node_modules[\\/](@babel|core-js|regenerator|promise)/,
name: "./dist/polyfills.min.js",
chunks: "all",
},
vendor: {
test: /[\\/]node_modules[\\/](slick|bootstrap|jquery)/,
name: "./dist/vendor.min.js",
chunks: "all",
},
},
},
},
}
sass@1.10.4，它不会将转义序列转换为它们的Unicode等效项。 - Taxel