для чого використовуються .map файли у Bootstrap 3.x?

443

У CSSпапку входять два файли з розширеннями файлу .map. Вони є:

bootstrap-theme.css.map
bootstrap.css.map

Вони здаються мінімізованими файлами, але я не знаю, для чого вони потрібні.

twitter-bootstrap-3 source-maps

— водянка
джерело

448

Від роботи з препроцесорами CSS у Chrome DevTools :

Багато розробників генерують таблиці стилів CSS за допомогою препроцесора CSS, таких як Sass, Less або Stylus. Оскільки файли CSS створюються, редагування CSS-файлів безпосередньо не є таким корисним.

Для препроцесорів, які підтримують CSS-вихідні карти, DevTools дозволяє вам редагувати в реальному часі вихідні файли препроцесора на панелі "Джерела" та переглядати результати, не виходячи з DevTools або оновлювати сторінку. Під час огляду елемента, стилі якого надаються згенерованим файлом CSS, на панелі «Елементи» відображається посилання на вихідний файл-джерело, а не згенерований файл .css.

— Стів Янсен
джерело

11

Ця відповідь пояснює, що вони використовуються спільно з препроцесорами CSS - чого я ще не дуже вивчив. Спасибі

— wetjosh

21

Здається, це ці аналогічні символи налагодження в мові програмування, ні?

— Кріс Сіммонс

1

я отримував js помилку, тому я зробив підроблений файл у цій каталозі, щоб не відображати помилку.

3

@IssaFarax Ви можете відключити завантаження вихідних карт через налаштування інструментів ChromeDev. Відкрийте DevTools> Клацніть на шестірні налаштувань> Зніміть прапорець увімкнути (JavaScript | CSS) вихідні карти

— Giles Wells

Ви також можете почитати: stackoverflow.com/questions/21766880/…

— Vivek, понеділок,

173

Якщо ви просто хочете позбутися помилки, ви також можете видалити цей рядок у bootstrap.css:

/*# sourceMappingURL=bootstrap.css.map */

— ЛеонардШалліс
джерело

52

Або просто хеш, #і він перетвориться на простий коментар, якщо ви захочете його пізніше.

— givanse

1

Якщо ми її видалимо bootstrap.css, чи це спричинює якісь помилки чи подібні речі?

— Гаррі Сурен

4

Ні, це не так. Це просто ускладнює налагодження.

— Gfra54

1

Ви не хочете цього для виробничого середовища, тому компілюйте його відповідно ( gulp --productionякщо ви використовуєте gulp, це не включає цю лінію sourceMapping) та виключіть * .map файли зі своїх завантажень на виробничий сервер.

— Curvian Vynes

2

Яка помилка? Питання не згадує про помилку.

— bluenote10

70

Це вихідні карти. Надайте їх поряд із стиснутими вихідними файлами; такі інструменти для розробників, як Firefox та Chrome, використовуватимуть їх для налагодження, як ніби код не був стислий.

— давидизм
джерело

9

Css для завантаження може бути згенеровано меншою мірою. Основне призначення файлу карт використовується для прив’язки вихідного коду css до менш вихідного коду в інструменті хромованого розробника. Як ми це робили. Якщо ми перевіряємо елемент у інструменті хромованого розробника. ви можете побачити вихідний код css. Але якщо включити файл карти на сторінку з файлом CSS для завантаження. ви можете побачити менше коду, який застосовується до стилю елементів, який ви хочете перевірити.

— Джо.ванг
джерело

8

Ви коли-небудь виявляли, що хочете, щоб ви могли зберегти код читача на стороні клієнта і, що ще важливіше, налагоджувати, навіть після того, як ви його комбінували та мінімізували, не впливаючи на продуктивність? Ну а тепер можна через магію вихідних карт.

Ця стаття пояснює Карти джерел з використанням практичного підходу.

— Марсіо Мацукатато
джерело

5

Для всіх, хто прийшов сюди шукати ці файли (як я), зазвичай їх можна знайти, додавши .mapв кінець URL-адреси:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.map

Не забудьте замінити версію будь-якою версією Bootstrap, яку ви використовуєте.

— Тревіс Хетер
джерело

5

Що таке файл карти CSS?

Це файл формату JSON, який посилає файл CSS на його вихідні файли, як правило, файли, записані в препроцесорах (тобто, Less, Sass, Stylus тощо), це для того, щоб зробити живу налагодження вихідних файлів з Інтернету. браузер.

Що таке препроцесор CSS? Приклади: Sass, Mess, Stylus

Це інструмент генератора CSS, який використовує потужність програмування для надійної та швидкої генерації CSS.

— Шаді Намруті
джерело

1

Чи слід розглядати їх як текстові файли або потоки байтів? Чи повинні вони закінчитися \n?

— Аарон Франке

@AaronFranke Це текстові файли. Я пропоную скопіювати вміст .map-файлу та вставити його на jsonblob.com, щоб побачити пари ключів / значень JSON

— Shadi Namrouti

-1

Якщо вам цікаво, чому вам не вистачає файлів карт з Bootstrap 3.x; переконайтеся, що у вас встановлена правильна версія. Мені довелося завантажити 3.3.7, щоб отримати бажаний ефект, який я шукав.

— TheJoe
джерело