Clarification on what `resolve-url-loader` actually does?

[t47io]

Hi, I'm trying to understand what resolve-url-loader actually does. I have been reading #51 , but would still want to clarify with an example.

So say I have a folder structure like this:

- a.scss
- dir/
  * b.scss
  * b.png

And the contents are:

// a.scss [root file]
@import './dir/b';

// b.scss
.selector {
  background-image: url('./b.png');
}

So with resolve-url-loader?attempts=1&sourceMap, would this work? Or do I need to write as url('./dir/b.png')? I thought having the url('./b.png') is handy since another root file at different path can still work. But reading the README it seems I need to write url('./dir/b.png')?

I guess the confusion is about:

resolves relative paths in url() statements based on the original source file

Here "original source file" in this case is b.scss?

[t47io]

If resolve-url-loader should enable writing url('./b.png'), then somehow I can't get it to work.

{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: [
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            modules: true,
            localIdentName: DEBUG ? '[local]' : '__[hash:6]',
          },
        },
        {
          loader: 'postcss-loader',
          options: { plugins: () => ([autoprefixer, csso]) },
        },
        {
          loader: 'resolve-url-loader',
          options: {
            attempts: 1,
            debug: true,
            sourceMap: false,
          },
        },
        'fix-global-font-face-loader',
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
          },
        },
      ],
    }),
  }

I'm using webpack 3 and extract-text-webpack-plugin 3. I don't get any console.logs for path resolution even I have debug=true there. Also not sure if I should try the url: false in css-loader.

[bholloway]

@t47io you are completely correct in your example.

I would call this a "feature-based" folder structure. This was always the primary use-case of resolve-url-loader.

Setting url: false in css-loader will stop your assets being processed there. So if you do that make sure it is only to inspect the rewritten url.

[bholloway]

@t47io since you are extracting CSS try it first with just the sass-loader and resolve-url-loader and see what you get.

[t47io]

@bholloway also reading https://github.com/webpack-contrib/sass-loader#problems-with-url, does it mean my loader order is wrong? I'm not sure since that would be the opposite of https://github.com/bholloway/resolve-url-loader#usage

Add the missing url rewriting using the resolve-url-loader. Place it before the sass-loader in the loader chain.

Does "before" mean in the config or execution (which is bottom-up order)?

[t47io]

Solved! See https://github.com/css-modules/css-modules/issues/95#issuecomment-394534159, the problem is when sourceMap is lost, the resolve-url-loader was not doing anything, which also explains why I didn't see any debug=true prints. Now it all works. Thanks @bholloway

[bholloway]

Glad to hear @t47io.

There is a fail option that you should probably try, to avoid swallowing errors. I should really make it default in some future breaking release.