Откуда моя веб-страница загружает свои файлы scss?

Итак, я работаю над веб-проектом и начал с шаблона HTML / CSS, созданного кем-то другим. Похоже, он использует бутстрап, о котором я мало что знаю.

При использовании инструментов разработчика Chrome я заметил, что некоторые из применяемых стилей css были получены из файлов scss, которые я не могу найти в своей системе. Мне интересно, где эти файлы существуют?

Скриншоты взяты из

  1. Инструменты разработчика Chrome, которые сообщают мне путь к файлу scss, в котором применяются стили.

  2. Тот же путь в моей системе, где была указана папка scss, похоже, не существует. Обратите внимание, что я нахожусь в папке поставщика, но папки scss нет, как показывают инструменты разработчика.

Может кто-нибудь объяснить мне, откуда браузер загружает эти файлы scss? Я пробовал, чтобы Windows отображала скрытые файлы и папки, и это не имело значения. Спасибо!

Путь к файлу scss с помощью инструментов разработчика Chrome: Путь к файлу scss с помощью инструментов разработчика Chrome

Тот же путь в моей файловой системе Тот же путь в моей файловой системе


css sass bootstrap-4
person echo    schedule 04.05.2018    source источник
comment
похоже, что предыдущий разработчик использовал препроцессор CSS (SASS), вы видите его скомпилированный вывод. проверьте исходные файлы на предмет внешних включений, вызывающих его. ваши скриншоты бесполезны, поскольку они вызываются из вашей разметки или файлов js.   -  person fred randall    schedule 04.05.2018
comment
Вы нашли файл .map в своей папке CSS?   -  person patelarpan    schedule 04.05.2018
comment
Можете ли вы поделиться снимком экрана с папкой начальной загрузки?   -  person patelarpan    schedule 04.05.2018

Ответы (2)


arrow_upward
2
arrow_downward

Произошло это из-за исходной карты scss. Он генерируется при компиляции файла scss в CSS для упрощения отладки.

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

Вы можете найти дополнительную информацию об этом здесь

person patelarpan    schedule 04.05.2018

arrow_upward
0
arrow_downward

В пути к вашему проекту могут быть файлы с расширением .map (называемые исходной картой в мире scss). Эти .map файлы относятся к пути к .scss файлам, которые использовались во время разработки для создания .css файлов. Итак, даже если в вашем пути контекста нет физических .scss файлов; а ваш html-файл относится к скомпилированному .css файлу, отладчик Chrome по-прежнему будет показывать исходный .scss файл, из которого был скомпилирован .css. Если вам требуется, чтобы отладчик Chrome отображал фактическое имя файла .css, вы можете временно удалить файл .map. Это предложение предполагает, что вы хотели бы видеть .css имя файла вместо несуществующих .scss файлов. Вы также можете проверить эту ссылку, чтобы узнать больше о работе с .scss файлами в отладчике Chrome: https://www.sitepoint.com/using-source-maps-debug-sass-chrome/

person Binita Bharati    schedule 13.03.2020
comment
Вы здесь что-то поняли, но ответ, кажется, теряется в формулировке. Вы говорите, что файлы .map относятся к файлам .scss, что означает, что внутри .map должна быть ссылка, которую вы говорите. Было бы неплохо, если бы вы могли точно указать, где в структуре файла .map дана ссылка .scss и как эта ссылка будет выглядеть. После этого разъяснения можно было бы продолжить и действительно найти нужную ссылку. - person user7420124; 26.11.2020
comment
@Ootagu - да, вот что я имею в виду. К сожалению, на данный момент у меня нет образца кода для демонстрации этого. Но позже я попытаюсь отредактировать свой ответ на примере. - person Binita Bharati; 27.11.2020