Does source-maps in style tags work?

问题

I'm having problems with CSS within a tag and source-maps.

In order to improve the load time of my project, I have changed the way I put the CSS in my HTML, turning this:

<html>
    <head>
      <link rel="stylesheet" href="css/styles.css">
    </head>
  <body>
    <h1>Source-maps working wonderfully</h1>
  </body>
</html>

Into this:

<html>
    <head>
      <style>
        h1 { color: red };

        //more css

        /*# sourceMappingURL=css/style.css.map */
      </style>
    </head>
  <body>
    <h1>Source-maps not working :(</h1>
  </body>
</html>

Basically, during the building process, the original CSS file generated with sassc (with sourcemaps flag) is dumped into the html that will be served.

I am having troubles because it does not recognise the source-maps when the CSS is inside a tag but it does it perfectly when i use the tag . Am I missing an extra annotation or it is not supported?

I'm using chrome.

回答1:

/*@ sourceMappingURL= is the old syntax, /*# sourceMappingURL= should be used instead.

The new Syntax is implemented in all major browser source and Internet explorer 11+ source.

Chrome dev tools

Open Developer Tools F12
Open Settings F1.
Click "Enable CSS source maps" checkbox

Firefox dev tools

Open Developer Tools F12
Open Toolbar Options (Cog on right).
Click "Show original sources" checkbox

Internet Explorer dev tools

Open Developer Tools F12
Open Debugger panel Ctrl+3
click the last icon on the right

Safari dev tools & Firebug

enabled by default.

来源：https://stackoverflow.com/questions/32090650/does-source-maps-in-style-tags-work

标签

css

google-chrome

Sass

source-maps