Search code examples
cssurlfontswebpackfont-face

Webpack Import Including Font Face with Relative Path

In my Webpack configuration I'm defining one resource root for common files like this:

{
  loader: 'sass-loader',
  options: {
    includePaths: [
      'node_modules',
      'src/components/_common'
    ]
  }
}

Now I'm having e.g. a file _fonts.scss in the resource root and can import it using @import "fonts";. This is working like a charm.

However, if this file contains a @font-face directive that is written relative to src/components/_common (path like in the Webpack configuration above) the file loading of that font url won't work. Webpack isn't able to resolve this URL as it assumes that it's written based on the path of the actual file which imports _fonts.scss, which is not src/components/_common.

So, my question is: Would it be possible that I write the path absolute from the beginning of the project, so that Webpack can always resolve it as it's no longer relative? I've tried it with no luck. Also I've tried specifying resolve.modules and resolve.alias with no luck too.

Solution

  • To solve this issue, it's only necessary to use the resolve-url-loader:

    https://github.com/bholloway/resolve-url-loader

    Keep in mind that it's currently necessary to have sourceMap enabled on any previous loader. It's just that easy.