如何打开 "leaflet.css" 在一个应用程序中 React 从 webpack?

我解决了这个问题，只是进口 CSS 通过以下方式：

import 'leaflet/dist/leaflet.css';

Webpack 不能拆卸 CSS 没有引导加载程序的一些帮助。 最常用的CSS装载机是
https://github.com/webpack/css-loader
.

我不同意Lakshman Divaakar的答案，因为我认为进口特定文件非常有用 CSS 组件 JSX 此组件，因为这允许这个组件的整个适当的代码在一个地方生活。 如果我删除组件，那么它 CSS 不再将成为任何大会的一部分。 如果我想重用组件，那么 CSS 位于那边和他一起去。

所以，我从yuho vepsalainen得到了帮助 survivejs 在这一点。 HIs 理事会是

所以他找到了 Leaflet CSS, 你必须需要打开前往 leaflet/dist/leaflet.css 在您的配置中 webpack. 最有可能，您有一个样式路径的设置 /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]"}

]

}

在我的应用程序中使用 webpack /穿过 create-react-app/, 我将下一个字符串添加到我的文件顶部 css, 相关卡：

/* map.css */



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

例如，此文件可能是

map.css

. 我也放了任何定制卡 css 此文件中的样式。

然后在我的文件中 javascript / jsx, 使用组件

Map

, 我导入此文件 css:

// map.js



import './map.css'

我合作了 leaflet, 并添加 leaflet 到 index.html 它的工作正常。 通常你不添加 CSS 文件B. JSX. 添加所有风格和外部库 index.html.

在我的情况下它是
https://github.com/Lakshman-LD ... .jade
. 使用开放的街道地图 leaflet 和 reactJS.

这段代码为我工作了。

1/ 进口 leaflet.css 直接从 leaflet /位于里面 node_modules/

2/ 添加 useEffect, 在哪里取代卡标记图标 /默认情况下，导入后，标记不可见 leaflet.css/

3/ 可视化任何组件 leaflet

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 "100vh"="" -0.09]}="" center="{[51.505," height:="" style="{{" zoom="{13}" }}="">

<tilelayer attribution='&amp;copy &lt;a href="[url=http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt;]http://osm.org/copyright%26quo ... gt%3B[/url] contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></tilelayer>

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

<popup>

 A pretty CSS3 popup. <br/> Easily customizable.

 </popup>

</marker>

</map>

 /;

};