Webpack 5 不捆绑 CSS url() 资产模块答案

【问题标题】：Webpack 5 not bundling CSS url() asset modulesWebpack 5 不捆绑 CSS url() 资产模块
【发布时间】：2022-01-04 00:53:45
【问题描述】：

我正在尝试在我的 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() 时发生。

【问题讨论】：

您的问题似乎不是您的 webpack.config，而是您告诉它的文件不存在的事实。 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' 行已经告诉你它在那个地方找不到文件，相对于那个文件夹。确保您的文件位于您声称的位置。

标签： javascript webpack sass webpack-5

【解决方案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

【讨论】：