Can’t use __static on SCSS files

[IGassmann]

SCSS' url('...') statements can't be resolved using electron-webpack's __static.

This works: src: url('../../../static/font/somewebfont.eot');

This doesn't: src: url(__static + 'font/somewebfont.eot'); neither this: src: url('#{$__static}font/somewebfont.eot');

[MatthewFrench]

Any news on this? This is pretty breaking. I'm trying to figure this out as well.

[loopmode]

Okay I found a working solution - but only for scss files.. Turns out that sass-loader supports variables, which css-loader doesn't (not sure about less-loader) It works in development and in production, so that's good.

Usage is like this:

.my-div {
    background: url($__static + '/some-image.png');
} 

The change itself was this: (just hacked into the compiled node_modules/electron-webpack/out/targets/RendererTarget.js)

Is it worth making a pull request for this? @develar what do you think of it? "Partial solution" better than no solution at all? If we document it, we need to state that this only works with scss files. We could not document it for now and strive for a more generic solution..

[loopmode]

I guess a "proper" solution would be using postcss. Will investigate.

[MatthewFrench]

I'd appreciate a partial solution pull request while a better solution is in the works.

[chriswetterman]

I'm in the same boat here and don't like the idea of messing around with anything in node_modules/ as we have multiple devs that need this support

[IGassmann]

@seanyesmunt

[loopmode]

@develar I think the sass support as shown in my screenie up there is good enough and should be implemented. It simply provides a $__static variable to all processed sass files. Would you mind just putting it in? I volunteer to update the docs and explain it. It's "only in sass" and "not in any stylesheets" but it's better than nothing. Plus this particular issue is only about sass..

[fabiospampinato]

I've fixed it this way, no patching required:

1. Add the following to your webpack configuration:

{
  resolve: {
    alias: {
      '@static': path.resolve ( __dirname, 'static' )
    }
}

2. Write paths like this in your .scss files: ~@static/foo/bar

[loopmode]

I've fixed it this way, no patching required:

1. Add the following to your webpack configuration:

{
  resolve: {
    alias: {
      '@static': path.resolve ( __dirname, 'static' )
    }
}

1. Write paths like this in your .scss files: ~@static/foo/bar

This is not restricted to SCSS only but also works with plain .css files. However, we might want to add this info to the docs somewhere.

[loopmode]

Actually, I'd go one step further: I suggest we provide this alias out-of-the-box in the first place!

@develar Any objections? Currently, we have the @ and the common aliases. It would mean adding a third one: "@static": path.resolve(this.projectDir, "static"). I tested and it doesn't interfere with the @ alias. It works fine in the production build as well.

Of course it would be great if we could get rid of the tilde, but even with the tilde necessary we should provide this alias. It effectively allows using images from the static folder in stylesheets - otherwise a real issue that needs a custom webpack addition as a workaround.

UPDATE: We could also set a default resolve.modules = ['node_modules', 'static']. In that case, for using an image static/electron.png, you just write background-image: url('electron.png'); in the CSS. Not sure whether this will impact performance negatively in projects with large static/ contents, tho.

[loopmode]

https://github.com/loopmode/electron-webpack-static-examples