Работают ли исходные карты в тегах стиля?

У меня возникают проблемы с CSS внутри тегов и исходных карт.

Чтобы улучшить время загрузки моего проекта, я изменил способ ввода CSS в свой HTML, изменив это:

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

В это:

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

        //more css

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

В принципе, во время процесса сборки исходный CSS файл, созданный с помощью sassc (с флагом sourcemaps), сбрасывается в html, который будет обслуживаться.

У меня возникают проблемы, потому что он не распознает исходные карты, когда CSS находится внутри тега, но он отлично работает, когда я использую тег. Мне не хватает дополнительной аннотации или она не поддерживается?

Я использую хром.

Ответы

Ответ 1

/*@ sourceMappingURL= - это старый синтаксис, вместо этого следует использовать /*# sourceMappingURL=.

Новый синтаксис реализован во всех основных браузерах source и Internet explorer 11+ источник.

Инструменты Chrome dev

  • Откройте Инструменты разработчика F12
  • Открыть настройки F1.
  • Установите флажок "Включить исходные карты CSS"

Инструменты Firefox dev

  • Откройте Инструменты разработчика F12
  • Откройте параметры панели инструментов (Cog справа).
  • Установите флажок "Показать исходные источники"

Инструменты разработчика Internet Explorer

  • Откройте Инструменты разработчика F12
  • Открыть панель отладки Ctrl+3
  • щелкните последний значок справа.

Инструменты Safari dev и Firebug

  • включен по умолчанию.

Ответ 2

Исходные карты должны работать из тегов стиля, но я предлагаю объединить все ваши файлы CSS в один CSS и загрузить его первым способом - это может замедлить первую страницу, но все остальные страницы сайта будут загружаться быстрее.