I have the following Webpack config (roughly, it has been simplified for this post):

```
const rootPublic = path.resolve('./public');
const LOCAL_IDENT_NAME = 'localIdentName=[name]_[local]_[hash:base64:5]';
const CSS_LOADER = `css?sourceMap&${LOCAL_IDENT_NAME}&root=${rootPublic}`;
const SASS_LOADER = 'sass?sourceMap&includePaths[]=' + path.resolve(__dirname, './src/styles');

// ... loaders:

loaders: [
  {
    test: /\.(jpe?g|png|gif|svg)$/,
    loader: 'url-loader?limit=10000&name=[path][name].[ext]'
  },
  {
    test: /\.scss$/,
    loader: config.DEVELOPMENT_MODE ? `style!${CSS_LOADER}!autoprefixer!${SASS_LOADER}`
                : ExtractTextPlugin.extract('style', `${CSS_LOADER}!autoprefixer!${SASS_LOADER}`)
  }, // ...
]

```

Now this works perfectly fine for images referenced normally in scss files:

```
.some-static-class {
  background: url('/images/bg.png');
}

```

However, it does *not* work when using the `:local` directive:

```
:local .SomeClass {
  background: url('/images/bg.png');
}

```

And I think that's because `root` is defined for the CSS loader. I get a build error: `Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif`

If instead I remove `root` from the css-loader config, then it builds fine but then the path "looks" correct in Chrome's inspector, but when you actually open the link in a new tab, it points to: `chrome-devtools://devtools/bundled/"/images/bg.png"` which obviously doesn't resolve correctly.

I'm not sure if the problem is with the `url-loader` config, or what's going on exactly. 

I played around with different webpack configs to specify the resolve.root, resolve.modulesDirectories, etc but totally not sure if they're having any affect or if I'm just going about it completely wrong. I also came across `resolve-url-loader` but not sure if that's even what I need at all.

Any ideas? MTIA!

**UPDATE**

I should note, that it works fine in Safari, but not in Chrome. So it seems like a Chrome-specific bug, but it's not practical to have to do all our development in Safari.

I also came across, [vue-style-loader](https://github.com/vuejs/vue-style-loader), which is a fork of style-loader that claims to fix this issue, but the way it fixes it is by relying on a hacky deprecated escape/unescape method.