Skip to content

Source map reference fails in Edge/IE 11 #21

Description

@RinkAttendant6

Problem

Microsoft Edge doesn't attempt to load the .map file due to the location of the source map comment in the CSS output.

This is somewhat a known phenomenon (with both CSS and JavaScript): https://stackoverflow.com/q/34687049/404623

Reproduce

main.less

html{color:red}
body{color:blue}

index.html

<!DOCTYPE html>
<link rel=stylesheet type=text/css href=main.css>
<p>Hello world</p>

Run lessc with the clean-css plugin:

lessc --source-map --clean-css main.less main.css

Output (main.css)

html{color:red}body{color:#00f}/*# sourceMappingURL=main.css.map */

Upon loading index.html in Microsoft Edge and opening Debugger in the F12 Developer Tools, there is no request made to the server for the map file, and inspect element shows main.css references in the Styles panel instead of main.less

Expected results

Edge should attempt to load the main.css.map file and refer to the code in the main.less file in the Styles panel in the F12 Developer Tools.

Expected output of main.css (note the newline)

html{color:red}body{color:#00f}
/*# sourceMappingURL=main.css.map */

Manually editing the files to add the newline character fixes the problem but defeats the purpose of the build tool.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions