SASS url resolving

[dyrkow]

Hi, I have a project on webpack with next file structure.

build/
     css/
         index.css  {....   .header{background:url(img/vk.svg);}  ...}
     img/
         vk.svg
     ....

src/
   components/
              header/
                     header.scss  {...   .header{background:url(../../img/vk.svg);}   ...}
   img/
       vk.svg

I need in build .header{background:url(../img/vk.svg);}

My webpack.config.js

....

 // SCSS
{
  test:/\.scss$/,
  use:[
    {
      loader:scss.loader,// I use mini-css-extract-plugin
      options:{
        sourceMap:true,
      }
    },
    {
      loader:'css-loader',
      options:{
        sourceMap:true,
        minimize: mode, // false if development
      }
    },
    {
      loader:'resolve-url-loader',
      options:{

      }
    },
    {
      loader:'sass-loader',
      options:{
        sourceMap:true,
        data:'$mode:' + mode + ';',
      }
    }
  ]
}

....

How solve this problem? I was trying use root and includePath options but it doesn't work for me or I did not correctly use the options.

[bholloway]

@WebWorkDeveloper I think includePaths only works for @import directives. That said, you are not co-locating sass and assets as a "feature", which is the primary use-case of resolve-url-loader.

I did see this comment which might help. This solution is quite involved but gives you most control if you can't change your (legacy) code. But I suspect you could do something less painful with postcss-loader, or even just change your s?css code.

Lets assume you can write url(~/img/vk.svg). In webpack he tilde ("~") is used in s?css to denote "module" and you are now working with a module path. That allows you to use the resolve features of webpack. Try looking at this comment on css-loader.

[dyrkow]

Thanks for your helping) I looked at all your recommendations and found options for extract-text-plugin options.publicPath also options are in mini-css-extract-plugin. To solve my problem need to change following

....
      {
        test:/\.(scss)$/,
        use:[

          {
            loader:css.loader,
            options:{
              publicPath:'../', <--
              sourceMap:true,
            }
          },
        }
....