Porównaj ceny domen i usług IT, sprzedawców z całego świata

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ć?
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Rozwiązałem ten problem po prostu importując CSS w następujący sposób:
import 'leaflet/dist/leaflet.css';
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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]"}
]
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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'
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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>
);
};

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się