CODEWITHSUNDEEP
javascriptwebpacksasswebpack-5
Will Jenner
Will Jenner

Reputation: 71

Webpack 5 not bundling CSS url() asset modules

I'm trying to include a new font face in my React application. This is built using Webpack.

I've followed the webpack documentation of font bundling, https://webpack.js.org/guides/asset-management/#loading-fonts. For some reason this isn't finding the font files I've included.

I have specified the font files source when making a new font face:

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

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

  font-style: normal;
}

And then I have included this new font face in my styles like so

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

However, the webpack compiler produces errors when trying to compile this:

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

These fonts do exist in the directory.

Heres the rules in my 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",
              ],
            },
          },
        },
      ],
    },

When importing images in .tsx files, the images do get bundles approriatley. This only occurs when using the CSS/SCSS url().

Upvotes: 5

Views: 4012

Answers (1)

Will Jenner
Will Jenner

Reputation: 71

I've solved this now.

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

All url()'s used when using sass loader must be relative to the source scss file.

In my case, I had index.scss, and variables/fonts.scss. In index.scss, I imported the fonts file. This meant I had to change the url from

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

to

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

Upvotes: 2

Related Questions