Webpack 5 未捆绑 CSS url() 资源模块

Question

我正在尝试在我的 React 应用程序中包含一个新的字体。这是使用 Webpack 构建的。

我遵循了字体捆绑的 webpack 文档，https://webpack.js.org/guides/asset-management/#loading-fonts。由于某种原因，这没有找到我包含的字体文件。

我在制作新字体时指定了字体文件源：

@font-face {
  font-family: "Lato Regular";

  src: url("../../assets/fonts/Lato-Regular.woff2") format("woff2");

  font-style: normal;
}

然后我将这个新字体包含在我的样式中，如下所示

.button {
   font-family: "Lato Regular";
}

然而，webpack 编译器在尝试编译时会产生错误：

ERROR in ./src/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/styles/index.scss) 21:37-102
Module not found: Error: Can't resolve '../../assets/fonts/Lato-Regular.woff2' in 'G:\src\com\Web\app\src\styles'
resolve '../../assets/fonts/Lato-Regular.woff2' in 'G:\src\com\Web\app\src\styles'
  using description file: G:\src\com\Web\app\package.json (relative path: ./src/styles)
    using description file: G:\src\com\Web\app\package.json (relative path: ./assets/fonts/Lato-Regular.woff2)
      no extension
        G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2 doesn't exist
      .ts
        G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2.ts doesn't exist
      .tsx
        G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2.tsx doesn't exist
      .js
        G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2.js doesn't exist
      as directory
        G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2 doesn't exist
 @ ./src/styles/index.scss 8:6-174 22:17-24 26:0-144 26:0-144 27:22-29 27:33-47 27:50-64
 @ ./src/index.tsx 4:0-29

这些字体确实存在于目录中。

这是我的 webpack.config.js 中的规则。

    output: {
      path: path.resolve(__dirname, "wwwroot"),
      filename: "js/[name].bundle.js",
      publicPath: "",
      assetModuleFilename: "static/[name][ext]",
    },
    entry: "./src/index.tsx",
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            // Creates `style` nodes from JS strings
            { loader: "style-loader" },
            // Translates CSS into CommonJS
            {
              loader: "css-loader",
              options: {
                url: true,
              },
            },
            // Compiles Sass to CSS
            { loader: "sass-loader" },
          ],
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: "asset",
        },
        {
          test: /\.(woff|woff2|eot|ttf)$/,
          type: "asset/resource",
        },
        {
          test: /\.(ts|js)x?$/i,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: [
                "@babel/preset-env",
                "@babel/preset-react",
                "@babel/preset-typescript",
              ],
            },
          },
        },
      ],
    },

当导入 .tsx 文件中的图像时，图像会相应地获得捆绑包。仅当使用 CSS/SCSS url() 时才会发生这种情况。

Answer 1

我现在已经解决了这个问题。

TLDR https://github.com/webpack-contrib/sass-loader#problems-with-url

使用 sass 加载器时使用的所有 url() 必须相对于源 scss 文件。

就我而言，我有index.scss和variables/fonts.scss。在index.scss中，我导入了字体文件。这意味着我必须更改网址

../../assets/fonts/Lato-Regular.woff2

到

../assets/fonts/Lato-Regular.woff2