我通过简单地导入CSS解决了这个问题，如下所示：

import 'leaflet/dist/leaflet.css';

在使用webpack的应用程序中（通过create-react-app），我在与Map相关的css文件的顶部添加了以下行：

/* map.css */

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

例如，这个文件可以是map.css。我还把任何自定义的Mapcss样式放在这个文件中。
然后，在使用Map组件的javascript / jsx文件中，导入以下css文件：

// map.js

import './map.css'

没有加载器的帮助，Webpack无法解析CSS。最常用的CSS加载器是webpack/css-loader。
我不同意Lakshman Diwaakar的回答，因为我认为在组件的JSX中导入特定于组件的CSS文件是非常有益的，因为它允许该组件的所有相关代码都位于一个位置。如果我删除了该组件，那么CSS就不再是任何构建的一部分。如果我想重用一个组件，那么CSS就在那里。

这个代码对我有用。
1/直接从传单（位于node_modules内）导入leaflet.css
2/添加useEffect，替换Map标记图标（默认情况下，在leaflet.css导入后，标记不可见）
3/渲染任何瓣叶组件🥳

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='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </Map>
  );
};

好吧，所以我得到了来自幸存者的Juho Vepsäläinen的帮助。他的建议是

• 要让它找到Leaflet CSS，你应该确保在你的webpack配置中包含leaflet/dist/leaflet.css的路径。如果你一直在跟踪材料，你可能会有一个样式路径设置（PATHS.style）。在path.resolve（__dirname，'node_modules/leaflet/dist/leaflet.css'）旁边有一些东西应该就可以了。*

我听从了他的建议，在webpack.config文件中添加了以下内容：

style: [
   path.join(__dirname, 'app', 'main.css'),
   path.resolve(__dirname, 'node_modules/leaflet/dist/leaflet.css')
],

但我也需要添加一个文件加载器后

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

我已经处理过传单，并且将传单添加到index.html中的操作是正确的。通常，你不会在JSX中添加CSS文件。所有的样式和外部库都添加到index.html中。
在我的例子中，它是index.jade。使用leaflet和reactJS实现了开放的街道Map。

this code **work** with me !
NB: i use react + **tailwind.css**

Just, you need to import 

**"leaflet/dist/leaflet.css"**
 & 
put this class 
**".leaflet-container"  :**

on file ==> **`index.css`** 

---------------------------------------------//index.css  
@import url("leaflet/dist/leaflet.css");`enter code here`

  .leaflet-container {
    width: 100%;
    height: 100vh;
  } */