Jak dołączyć plik „leaflet.css” do aplikacji React z pakietem webpack?
Używam Survivejs.com jako szablonu do tworzenia aplikacji React w oparciu o mapę z pakietem webpack. W przypadku mapy używam leaflet, ale nie mogę znaleźć sposobu, aby dodać plik leaflet.css. Bez tego kafelki mapy są wyświetlane w niewłaściwej kolejności.
Próbowałem dodać leaflet.css do pliku App.jsx używając tego
require('leaflet/dist/leaflet.css');
ale pojawia się następujący błąd
ERROR in ./~/leaflet/dist/leaflet.css
Module parse failed: myApp/node_modules/leaflet/dist/leaflet.css Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
Gdybym miał dostęp do index.html, mógłbym go tam dodać, ale korzystam z webpacka, nie wiem, jak to zrobić?
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
6 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
webpack/css-loader
https://github.com/webpack/css-loader
.
Nie zgadzam się z odpowiedzią Lakshmana Diwaakara, ponieważ uważam, że niezwykle przydatne jest importowanie określonych plików CSS komponentu do JSX tego komponentu, ponieważ pozwala to na to, aby cały odpowiedni kod tego komponentu znajdował się w jednym miejscu. Jeśli usunę komponent, ten CSS nie będzie już częścią żadnego zespołu. Jeśli chcę ponownie użyć komponentu, CSS jest do tego odpowiedni.
Anonimowy użytkownik
Potwierdzenie od:
Aby znaleźć ulotkę CSS, musisz upewnić się, że ścieżka do leaflet/dist/leaflet.css jest dołączona do konfiguracji webpacka. Najprawdopodobniej masz tam ustawienie ścieżki stylu (PATHS.style), jeśli śledziłeś materiał. Posiadanie czegoś wzdłuż path.resolve (__ dirname, 'node_modules/leaflet/dist/leaflet.css') powinno załatwić sprawę.
Postępowałem zgodnie z jego radą i dodałem do mojego pliku webpack.config:
ale później musiałem również dodać program do przesyłania plików
Anonimowy użytkownik
Potwierdzenie od:
Na przykład ten plik mógłby mieć postać . W tym pliku umieściłem również dowolne niestandardowe style map css.
Następnie w moim pliku javascript/jsx przy użyciu komponentu importuję ten plik css:
Anonimowy użytkownik
Potwierdzenie od:
W moim przypadku tak
index.jade
https://github.com/Lakshman-LD ... de... Wdrożyłem otwartą mapę ulic za pomocą ulotki i reaguj.
Anonimowy użytkownik
Potwierdzenie od:
1/importuj ulotkę.css bezpośrednio z ulotki (znajdującej się w node_modules)
2/dodaj useEffect, gdzie zamienić ikony znaczników mapy (domyślnie znaczniki nie były widoczne po zaimportowaniu leaflet.css)
3/wyrenderuj jakiekolwiek składniki ulotki
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">