Referenced images are not found during compile

[jacwright]

The emitted css is put into a temp folder outside the path of the project, making it impossible to include images in the css.

webpack.config.js

      "rules": [
...
      {
        test: /\.html$/,
        use: {
          loader: 'svelte-loader',
          options: {
            emitCss: true,
          }
        }
      }

Projects.html

<style>
.logo {
  background: url(../images/logo.png) no-repeat center;
}
</style>

Gives a compile error:

ERROR in ./node_modules/css-loader!/var/folders/b5/j22nvd1n37bfj3nkpn_q8ld80000gp/T/svelte-pbcwuy.css
    Module not found: Error: Can't resolve '../images/logo.png' in '/var/folders/b5/j22nvd1n37bfj3nkpn_q8ld80000gp/T'
     @ ./node_modules/css-loader!/var/folders/b5/j22nvd1n37bfj3nkpn_q8ld80000gp/T/svelte-pbcwuy.css 7:2874-2903

[Rich-Harris]

This is annoying — would love to know what the idiomatic webpack solution would be. I had a look at vue-loader for inspiration, but it seems that it doesn't emit CSS files.

[Rich-Harris]

This is fixed in 2.9 — the CSS is written to a virtual file system in the 'same' directory as the component, meaning relative paths are preserved.