Error: Can't resolve './files/roboto-cyrillic-ext-400-normal.woff2' (Should include resolve-url-loader)

[psychobolt]

Describe the bug

Can't resolve font files for sass files.

Steps to reproduce the behavior

1. Install a font e.g. @fontsource/roboto
2. Load global css into a story .e.g.

MDX:

import './styles';

SCSS:

/* styles.scss */
@use '@fontawesome/roboto/index';

3. npm run storybook
4. See error:

ERROR in ./src/stories/styles.scss (./node_modules/resolve-url-loader??ref--15-1!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/stories/styles.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve './files/roboto-cyrillic-ext-400-normal.woff2' in

The bellow works in custom webpack settings without any error:

{
  test: /\.s[ca]ss$/,
  use: [
    'style-loader', 
    'css-loader',
    { /* include resolve-url-loader' */
      loader: 'resolve-url-loader',
      options: {
        debug: true
      },
    }, 
    'sass-loader',
  ],
},

[psychobolt]

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

[riovir]

Was about to ask for this. Would the maintainers be open for a pull request?