Does not apply objectUrl for `<link>` tag when setting `sourceMap: true`

[Aqours]

Move from: css-loader with sourceMap: true cause adding style tag delayed

Actually, above issue is caused by style-loader.

https://github.com/webpack-contrib/style-loader/blob/378e90637f1c2c30bff026d7f92bdc82d9d4ecb8/lib/addStyles.js#L354-L363

I have an idea to resolve this issue, but it's not perfect. Consider to apply this solution.

My solution code:
Using code link.href = 'data:text/css;base64,' + btoa(encodeURIComponent(css)); replace line 363.

Test:

• Chrome 61: √
• Edge: √
• IE 11: √
• Firefox 55: × Bug(maybe)
• Safari: √

[alexander-akait]

@Aqours thank for issue, maybe best to wait when bug was fixed in firefox than change right source code?

[Aqours]

@evilebottnawi can you provide a flag(e.g: options.debug: true) to enable this feature? so we can debug less/sass source code.

[alexander-akait]

@d3viant0ne what do you think about this issue?

[WraithKenny]

I stumbled across this issue, not because of loading delays, but because the sourcemap doesn't actually work. In your tests, was the sourcemap actually loading, or just the stylesheet?

In my test, the stylesheet loads, but the styles in the firefox inspector point to the blob:null/ location, instead of the source file name. Additionally, it doesn't load the source file in the panel when you click on it.

This works correctly in Chrome. It looks like mozilla closed the referenced ticket as invalid. Maybe worth revisiting it?

(edit: or, it might be because I'm loading the html from file:/// Maybe Firefox just breaks for some reason in that case...)

[wxlworkhard]

Why use <link> replace <style> when sourceMap: true ? <link> cannot load url() asset on Chrome.

Why not just use

css += "\n/*# sourceMappingURL=data:application/json;base64," +
            btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";

and

styleElement.appendChild(document.createTextNode(css));

in addStyles.js file. This is simple and have no problem.