Doesn't seem to work with Webpack 4 and Fontawesome 5

[MtDalPizzol]

Hey folks... I'm trying to resolve fontawesome-free font files with resolve-url-loader but I'm getting errors like this one:

ERROR in ./src/styles/styles.scss (./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.eot' in '/home/dalpizzol/Dev/courses/webpack-walkthrough/src/styles'
 @ ./src/styles/styles.scss (./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss) 7:68862-68901 7:68932-68971
 @ ./src/styles/styles.scss
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

Here's my config:

      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'resolve-url-loader',
          'sass-loader'
        ]
      },
      {
        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: 'file-loader'
      }

And here are the relevant files and code fragments:

styles.scss

@import "~@fortawesome/fontawesome-free/scss/solid";

node_modules/@fortawesome/fontawesome-free/scss/_variables.scss

$fa-font-path:                "../webfonts" !default;

node_modules/@fortawesome/fontawesome-free/scss/solid.scss

@import 'variables';
...
src: url('#{$fa-font-path}/fa-solid-900.eot');

So, after running through sass-loader, I must have the following going into the resolve-url-loader

src: url('../webfonts/fa-solid-900.eot');

Then, resolve-url-loader should do its job, but it seems like it's doing nothing and webpack is trying to resolve the url that came out from the sass-loader.

[bholloway]

okay @MtDalPizzol some quick first impressions...

Your sass-loader will need sourceMap enabled. I think that you need to do that explicitly in the loader config. For a full example refer to packages/resolve-url-loader/examples directory in this repo. The sass-loader source-maps is a completely separate matter to whether you use source-maps for your own purposes, resolve-url-loader cannot operate without it.

Looking at your file locations it all looks plausible. It might just be a simple as the source-map being missing.

If not I'm thinking that you should try debug:true option for resolve-url-loader. That will give some debug logging and we can see exactly where the fonts are being resolved from

I expect that the debug will say something like ../webfonts/fa-solid-900.eot within directory node_modules/fortawesome/fontawesome-free/scss since that is where solid.scss is located (?).

[MtDalPizzol]

Thanks, @bholloway . Changing the config to the following solved the issue:

      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          'resolve-url-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }

Maybe a more explicit note about this on the README would avoid people opening "false flag" issues like this one. What do you think?

[bholloway]

@MtDalPizzol glad your issue is solved!

Regarding documentation there is a big exclamation here. I'll think on how to make this clearer. Perhaps it is not obvious how the loader works with the sass-loader before it.

[MtDalPizzol]

Good lord. I went up and down the README a hundred times and missed that. Sorry for the inconvenience.

[JoeFirebaugh]

I was bitten by this today, and it took me 4+ hours to find the right solution here. Some of that was from making the wrong assumptions to which parts of the Webpack build were to blame, because in my situation the non production build was working fine. And I had started my build configuration from an example/template.

My question is this, how difficult would it be to modify the resolve-url-loader to detect when it's not the first loader in the list, and it doesn't find the sourceMap? If it's reasonably possible without much effort, could it then report a potential build configuration error to a developer?

Thanks!