webpack - Webpack、SASS 和 FontAwesome 的问题

Question

我有一个大项目，托管在 Google Cloud App Engine 上，现在我在使用 Webpack 时遇到了一些麻烦。我使用 Webpack 编译 TypeScript，同时编译了几个 SASS 文件，配置如下：

{
    test: /\.sass$/,
    exclude: /node_modules/,
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: "css-loader",
            options: {
                url: false,
            }
        },
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        ["postcss-preset-env",],
                    ],
                },
            },
         },
         "sass-loader"
     ],
},

它很酷，但有时我的 FontAwesome 看起来像这样：

这些图标很少损坏（即使我自己不更改文件，所以看起来它取决于网络）。

在 SASS 文件中，我有带有 Unicode 转义序列的 FontAwesome 类，但 Webpack 将它们直接编译为常规字符：

FontAwesome 由 @font-face 规则加载，它使用 font-display: 块：

@font-face
    font-family: 'FontAwesome'
    font-display: block
    src: url('/fonts/fa/fa.woff2?v=4') format("woff2"), url('/fonts/fa/fa.woff?v=4') format("woff"), url('/fonts/fa/fa.ttf?v=4') format("truetype")

有谁知道为什么我的 FontAwesome 可能会损坏（尤其是定期损坏）？是因为在网络传输过程中编码发生了问题吗？我可以让 Webpack 不处理 Unicode 转义序列吗？

标签： webpacksassfont-awesome