@font-face src url's are not resolved correctly

[ogdakke]

Bug report

Bare with me, this issue has a lot moving parts, and only became an issue, after updating storybook, webpack, and of course, less-loader to the latest versions.

In one of our monorepo's packages, I have a otherTheme.less file which specifies @font-face blocks, which have absolute src urls like so:

@font-face {
  font-family: "FooBar Sans";
  src: url("/_static/fonts/FooBar-Regular.eot");
  src: local("☺"), url("/_static/fonts/FooBar-Regular.woff2") format("woff2"),
    url("/_static/fonts/FooBar-Regular.woff") format("woff"),
    url("/_static/fonts/FooBar-Regular.ttf") format("truetype");
}

In storybook, we use less as well to provide a theme switching functionality. Storybook has less-loader configured like so:

{
  test: /\.less$/,
    use: [
      { loader: "style-loader" },
      { loader: "css-loader" },
      {
        loader: "less-loader",
      },
  ],
}

in fontLoader.less, we load the fonts based on theme:

@import "~@FooBarPackage/less-variables/fonts";

.theme-default {
  * {
    font-family: @font-family-normal;
  }
  @import "~@FooBarPackage/themes/src/fonts/default.less";
}

&.theme-other-theme {
  * {
    font-family: @font-family-normal;
  }
  @import "~@FooBarPackage/themes/src/fonts/otherTheme.less"; // this is where the `@font-face` rules are.
}

Actual Behavior

Compiling .less works fine, but loading fonts in storybook results in this error:

ERROR in ./src/utils/fontLoader.less (../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[16].use[2]!./src/utils/fontLoader.less) 36:37-115
Module not found: Error: Can't resolve '/_static/fonts/FooBar-MediumItalic.ttf' in 'C:\Users\Me\Documents\Repositories\repo\storybook\src\utils'
 @ ./src/utils/fontLoader.less 53:4-66:5 8:6-186 20:17-24 24:7-21 50:25-39 51:36-47 51:50-64 55:6-65:7 56:54-65 56:68-82 62:42-53 62:56-70 64:21-28 75:0-156 75:0-156 76:22-29 76:33-47 76:50-64
 @ ./src/utils/ThemeSelector.tsx 39:0-28
 @ ./.storybook/preview.js 2:0-55 11:36-49
 @ ./.storybook/preview.js-generated-config-entry.js 13:0-146 15:15-41 15:45-63

Scouring through issues and the internet didn't really help here. Notably this issue did not help here.

I tried setting lessOptions.rewriteUrls to "local", but that had no effect.
Am I missing something here? This, almost identical (apart from migration changes) configuration used to work fine on [email protected], [email protected], storybook@5 and less-loader@^5.0.0

Expected Behavior

It should not try to import the remote urls from the filesystem.

How Do We Reproduce?

Can't share a repo right now, will try to get one up later.

Please paste the results of npx webpack-cli info here, and mention other relevant information

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 12.29 GB / 31.73 GB
  Binaries:
    Node: 18.19.1 - C:\devtools\NodeJS\node.EXE
    npm: 8.19.4 - C:\devtools\NodeJS\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (126.0.2592.87)    Internet Explorer: 11.0.19041.1566
  Monorepos:
    Lerna: 5.6.2
  Packages:
    less: 4.2.0
    clean-webpack-plugin: ^3.0.0 => 3.0.0
    css-loader: ^7.1.2 => 7.1.2
    file-loader: ^4.1.0 => 4.3.0
    less-loader: ^12.2.0 => 12.2.0
    style-loader: ^4.0.0 => 4.0.0
    ts-loader: ^9.5.1 => 9.5.1
    webpack: ^5.92.1 => 5.92.1
    webpack-cli: ^5.1.4 => 5.1.4

[alexander-akait]

You can use alias to provide alternative path or files them using https://github.com/webpack-contrib/css-loader?tab=readme-ov-file#object or https://github.com/webpack-contrib/css-loader?tab=readme-ov-file#disable-url-resolving-using-the--webpackignore-true--comment

Feel free to feedback

[ogdakke]

Many thanks @alexander-akait! Adding this resolved my problem

use: [
{ loader: "style-loader" },
{
  loader: "css-loader",
  options: {
    url: {
      filter: (url: string) => {
        if (url.startsWith("/_static")) {
          return false;
        }
        return true;
      },
    },
  },
},
{ loader: "less-loader" },
]