Webpack 5 字體資源問題，沒有錯誤但也沒有字體

Question

我試圖在我的 scss 文件中使用 @font-face 聲明。

正在應用正確的 CSS 規則，因此字體聲明看起來不錯。 路徑也得到解決，所以這沒問題。 而且，webpack 沒有拋出任何錯誤，因此它似乎不是任何類型的加載程序問題。 但最后，瀏覽器仍然沒有渲染字體。 （見圖片）

從 Webpack 5 開始，文檔指出您可以在規則中聲明“type: 'asset/resource'”以正確加載字體或圖像等資產。 它適用於我加載的圖像，但不適用於字體。

CSS：

@font-face {
    font-family: 'Yusei Magic', sans-serif;
    font-style: normal;
    font-weight: 400;
    src: url('./assets/fonts/yusei-magic/YuseiMagic-Regular.ttf')
        format('truetype');
}

Webpack 配置：

module: {
...
        rules: [
            ...
            {
                test: /\.ttf$/,
                type: 'asset/resource',
            },
        ],
    },

Answer 1

當您在font-family屬性上定義@font-face聲明時，您必須只寫一個字符串來指示您將如何在以后的 styles 中引用該字體。

換句話說，我錯誤地在font-family屬性的“Yusei Magic”之后包含了“sans-serif”。 這沒有引發錯誤，但它是不正確的 CSS ，因此是我的錯誤的根源。 感謝任何插話的人！

Answer 2

由於字體由 css function url()引用，因此也需要添加負責的 Webpack 加載程序。

如果沒有安裝：

npm install --save-dev style-loader css-loader

規則堆棧應如下所示：

 rules: [
   ...
   {
     test: /\.css$/i,
     use: ['style-loader', 'css-loader'],
   },
   {
     test: /\.(woff|woff2|eot|ttf|otf)$/i,
     type: 'asset/resource',
   },
   ...
 ]

可以在此處 (loading-css)和 此處 (loading-fonts)找到詳細信息。

css-loader像import/require() ) 一樣解釋@import和url()並將解析它們。

Answer 3

當您在 css 中使用url('./assets/fonts/yusei-magic/YuseiMagic-Regular.ttf')時，這是一個相對路徑，為了 webpack 可以解析您應該使用的 CSS 文件中的此類相對路徑resolve-url-loader在webpack.config.js文件中的規則數組中的以下配置：

other loaders ...

{
    test: /\.(sa|sc|c)ss$/, // styles files
    use: ["style-loader",'css-loader' ,'resolve-url-loader', {
      loader: 'sass-loader',
      options: {
        sourceMap: true, 
      }
    }],
  },
  {
    test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, // to import images and fonts
    loader: "file-loader",
  },

第一個用於加載帶有解析 URL 的 css/scss 文件，第二個用於加載 fonts（當然，這種模式也可以加載圖像:)）。