Исходные карты SASS не работают в Google Chrome - PullRequest
Новая
       41

Исходные карты SASS не работают в Google Chrome

0 голосов
/ 29 октября 2018

У меня включены исходные карты CSS, но Google Chrome ведет себя так, как будто они отключены. Во всех ресурсах, на которые я смотрел, все, что мне нужно сделать, это включить исходные карты в настройках DevTools. Там явно включено:

enter image description here

Исходные карты находятся рядом с моими файлами CCS, например:

enter image description here

В DevTools> Элементы> Стили есть только файлы CSS, без SCSS или SASS:

enter image description here

Вот мой конфиг grunt-contrib-sass в Gruntfile.js: 

    sass: {
        dist: {
            files: [{
                expand: true,
                cwd: './src/',
                src: ['**/*.css', '**/*.scss', '**/*.sass'],
                dest: './dist',
                ext: '.css',
                sourcemap: 'auto',
            }],
            options: {
            }
        }
    },

Этот сайт обслуживается через grunt serve в OSX, а исходные карты генерируются grunt-contrib-sass.

Что действительно странно, так это то, что я уверен на 99%, что однажды он работал правильно, сразу после первой настройки. Я ничего не изменил после этого ...

Каков следующий шаг в попытке отладить это? Смогу ли я узнать, выполняет ли Chrome (не удалось?) Запрос к файлам .map? Я что-то упустил?

ОБНОВЛЕНИЕ: Я думаю, что я определил, что карты не загружаются, потому что sourceMappingURL отсутствует в скомпилированном CSS. Я открыл новый выпуск для этого .

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Оказывается, что автоматический префикс работал на скомпилированном CSS и удалял комментарий sourceMapURL, который теперь имеет смысл, что он это сделает, потому что, если у вас не включены карты исходного кода с автоматическим префиксом (чего я не делал) , это сделает исходные карты неверными. Крутая вещь, которую я узнал из этого, заключается в том, что авто-префикс, по-видимому, может использовать исходные карты Sass для создания своих собственных и сохранять все верное для файлов Sass.

На самом деле, мне бы хотелось, чтобы при каждом автоматическом префиксе обнаруживались исходные карты, но не включались исходные карты, потому что очевидно, что задачи не должны генерировать исходные карты, которые не будут использоваться.

Я бы с большей вероятностью получил бы ответ раньше, если бы опубликовал весь свой Gruntfile, но это очень много, и я пытался вернуться к коду, который мне показался уместным. Чёрт.

0 голосов
/ 29 октября 2018

После просмотра ваших отзывов в комментариях. Я добавляю это как ответ

Причина, по которой ваша исходная карта не загружается, связана с тем, что вы используете grunt-contrib-sass с dart sass.

Dart-sass - это недавнее переписывание ruby ​​sass. Grunt-contrib-sass разработан для работы с Ruby sass.

Поэтому я рекомендую вам удалить sass. И сделай самоцвет из рубинового сасса. Или измените синтаксис конфигов sass на новые конфиги https://www.npmjs.com/package/sass. Но я не уверен, что это будет работать с текущей настройкой. Поэтому первое решение рекомендуется.

Требования к карте источника для grunt contrib можно найти здесь https://github.com/gruntjs/grunt-contrib-sass#sourcemap

...