Jak dołączyć plik „leaflet.css” do aplikacji React z pakietem webpack?

Rozwiązałem ten problem po prostu importując CSS w następujący sposób:

import 'leaflet/dist/leaflet.css';

Webpack nie może przeanalizować CSS bez pomocy programu ładującego. Najpopularniejszym programem ładującym CSS jest

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.

Więc otrzymałem pomoc od Juho Vepsalainena od Survivejs w tej sprawie. Jego rada była taka

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:

style: [

 path.join(__dirname, 'app', 'main.css'),

 path.resolve(__dirname, 'node_modules/leaflet/dist/leaflet.css')

],

ale później musiałem również dodać program do przesyłania plików

module: {

 loaders: [

 {test:/\.(png|jpg)$/, loader: "file-loader?name=images/[name].[ext]"}

]

}

W moich aplikacjach korzystających z pakietu internetowego (za pośrednictwem aplikacji create-react-app) dodaję następujący wiersz na początku pliku css związanego z mapami:

/* map.css */@import '~leaflet/dist/leaflet.css';

Na przykład ten plik mógłby mieć postać

map.css

. W tym pliku umieściłem również dowolne niestandardowe style map css.
Następnie w moim pliku javascript/jsx przy użyciu komponentu

Map

importuję ten plik css:

// map.jsimport './map.css'

Pracowałem z ulotką i dodawanie ulotki do index.html działało poprawnie. Zwykle nie dodajesz pliku CSS do JSX. Wszystkie style i biblioteki zewnętrzne zostały dodane do pliku index.html.
W moim przypadku tak

index.jade
https://github.com/Lakshman-LD ... de... Wdrożyłem otwartą mapę ulic za pomocą ulotki i reaguj.

Ten kod zadziałał dla mnie.
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">

import * as React from "react";

import { Map, TileLayer, Marker, Popup } from "react-leaflet-universal";

import "leaflet/dist/leaflet.css";export default () => {

 React.useEffect(() => {

 const L = require("leaflet"); delete L.Icon.Default.prototype._getIconUrl; L.Icon.Default.mergeOptions({

 iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),

 iconUrl: require("leaflet/dist/images/marker-icon.png"),

 shadowUrl: require("leaflet/dist/images/marker-shadow.png")

 });

 }, []); return ( <Map center={[51.505, -0.09]} zoom={13} style={{ height: "100vh" }}>

 <TileLayer

 attribution='&copy [url="[url=http://osm.org/copyright">OpenStreetMap]http://osm.org/copyright">OpenStreetMap[/url][/url] contributors'

 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

/>

 <Marker position={[51.505, -0.09]}>

 <Popup>

 A pretty CSS3 popup.  Easily customizable.

 </Popup>

 </Marker>

 </Map>

 );

};