resolve-url-loader not working properly with webpack 4 and dart-sass

[thasmo]

First time using resolve-url-loader and I think something's not working correctly when using resolve-url-loader with webpack 4 and dart-sass.

When enabling the debug option, resolve-url-loader prints this:

resolve-url-loader: ./assets/base/main.scss: ../../fonts/avenir-400.woff
  ./assets/base
  NOT FOUND

I'm not sure why the font file can't be found, but relative from the main.scss file, the location of the font file is ../../fonts/avenir-400.woff.

My stylesheet-related webpack config part looks basically like this:

{ loader: 'css-loader', options: { sourceMap: false } },
{ loader: 'postcss-loader', options: { sourceMap: false } },
{
    loader: 'resolve-url-loader',
    options: {
        engine: 'postcss',
        sourceMap: false,
        debug: true,
    },
},
{
    loader: 'sass-loader',
    options: {
        sourceMap: true,
    },
},

[tracker1]

I'm having similar issues...

    ERROR in ./assets/baseline.scss (../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/src??ref--7-2!../node_modules/resolve-url-loader??ref--7-3!../node_modules/sass-loader/lib/loader.js??ref--7-4!./assets/baseline.scss)
    Module not found: Error: Can't resolve '../../fonts/roboto-slab/Roboto-Slab-Bold.woff' in 'C:\Users\mryan\src\runbeck.visualstudio.com\vocem\rb-vocem\ui\_app\assets'
     @ ./assets/baseline.scss (../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/src??ref--7-2!../node_modules/resolve-url-loader??ref--7-3!../node_modules/sass-loader/lib/loader.js??ref--7-4!./assets/baseline.scss) 7:4049-4105 7:4323-4379

I'm referencing roboto-fontface

@import "~roboto-fontface/css/roboto/sass/roboto-fontface-regular.scss";

[bholloway]

I am not familiar with dart-sass. Can you provide a minimum breaking repo?

[thasmo]

@bholloway Not sure when I will have time to provide a repo but basically dart-sass can be used with the sass-loader by setting the implementation option.

    {
        loader: "sass-loader",
        options: {
            implementation: require("sass")
        }
    }

[thasmo]

@bholloway Found some time to create a repo for sharing a simple reproduction case and it seems resolve-url-loader does not handle dart-sass properly somehow. Using node-sass works anyway. (Simply clone it, run npm install and npm start. Have a look at the webpack.config.js to turn off dart-sass to see the difference.)

Afaik dart-sass, available as the sass package on npm is the new de-facto reference implementation of Sass; the successor of node-sass so to speak.

I was wondering how resolve-url-loader would fail when using dart-sass anyway. Could it be that the source-map generation of dart-sass is not working properly?

[bholloway]

Thanks @thasmo I will try to take a look soon

[bholloway]

I added adjust-sourcemap-loader and file-loader.

In debug mode the adjust-sourcemap-loader will dump the sourcemap sources to stdout.

rules: [
  {
    test: /\.png$/,
    loader: 'file-loader',
  },
  {
    test: /\.(scss|css)$/,
    use: [
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
      },
      {
        loader:  'resolve-url-loader',
      },
      {
        loader:  'adjust-sourcemap-loader',
        options: {
          debug: true,
        },
      },
      {
        loader: 'sass-loader',
        options: {
          implementation: sass, // comment this line out and it will work
          sourceMap: true,
        },
      },
    ],
  },
],

When implementation is commented there are definitely both the sources present.

adjust-sourcemap-loader:
  /mnt/c/.../resolve-url-loader-dart-sass/src/main.scss
        @ /mnt/c/.../resolve-url-loader-dart-sass/node_modules/sass-loader/lib/loader.js??ref--5-4
    INPUT src/main.scss
          src/dir/import.scss
 ABSOLUTE /mnt/c/.../resolve-url-loader-dart-sass/src/main.scss
          /mnt/c/.../resolve-url-loader-dart-sass/src/dir/import.scss

When implementation is as coded only the entry source is present.

adjust-sourcemap-loader:
  /mnt/c/.../resolve-url-loader-dart-sass/src/main.scss
        @ /mnt/c/.../resolve-url-loader-dart-sass/node_modules/sass-loader/lib/loader.js??ref--5-4
    INPUT src/main.scss
 ABSOLUTE /mnt/c/.../resolve-url-loader-dart-sass/src/main.scss

I have not looked deeper to see if there are some necessary options that are not being passed through to the implementation.

[pscheit]

ahum. So this is a problem from dart-sass? Shouldn't we file a issue then? Is the workaround to not use dart-sass? :o

[bholloway]

This seems to have since been fixed somewhere upstream.

If I rerun @thasmo repo for sharing a simple reproduction case then it now works.

Here is my debug output now

adjust-sourcemap-loader:
  /.../resolve-url-loader-dart-sass/src/main.scss
        @ /.../resolve-url-loader-dart-sass/node_modules/sass-loader/dist/cjs.js??ref--5-4
    INPUT src/dir/import.scss
          src/main.scss
 ABSOLUTE /.../resolve-url-loader-dart-sass/src/dir/import.scss
          /.../resolve-url-loader-dart-sass/src/main.scss

Given the order of sourcemap sources I suspect it was fixed by this sass-loader PR from May 8.

@thasmo can you please confirm so that we can close out this issue and sass/dart-sass#819.

[thasmo]

Tested with my reproduction case (although the case seems to actually have never worked due to a missing loader configuration for the image 🤔) and another test-project and so far this really seems to work now. Thanks for your time and effort looking into it and informing about the fix. 👍 Awesome!

[larssn]

A heads up: This seems to be a problem with again with sass-loader 8.0.0, which was recently released. We had weird issues with relative paths suddenly, until we rolled back to 7.x.

[Nettsentrisk]

I'm getting this problem now with sass-loader 8.x, and adding adjust-sourcemap-loader doesn't help this time. Should the issue be handled here or with sass-loader?