листовка CSS проблема импорта с использованием VueJs2 и веб-пакета

Question

Я пытаюсь создать отдельный файловый компонент, используя vuejs2 для отображения карты Leaflet.

Несмотря на то, что мой компонент карты установлен правильно, я борюсь с импортом листовки css.Плитки карты кажутся грязными, и я предполагаю, что к блоку карты не применяется стиль: Неупорядоченные плитки .Ни веб-пакет, ни консоль браузера не отображают ошибку.

Есть какой-нибудь ключ к правильной загрузке таблиц стилей?

источники доступны на github repo

Answer 1

Существует как минимум две проблемы:

1. В файле webpack.config.js у вас включено options: {modules: true} для файлов CSS.Это заставляет webpack предварительно обработать ваш файл leaflet.css и поменять все имена селекторов.Измените параметр модулей на false

2. Ваш контейнер карты должен иметь явный размер.Например, в разделе <style> вашего map-component.vue добавьте следующее:

   .map-container {width: 800px;высота: 600 пикселей;}