如何在带有 webpack 的 React 应用程序中包含“leaflet.css”？

Question

我使用survivaljs.com 站点作为模板，使用webpack 构建基于地图的React 应用程序。对于地图，我使用的是传单，但我找不到添加传单.css 的方法。如果没有这个，地图图块将以错误的顺序显示。

我已经尝试使用这个将 Leaflet.css 添加到 App.jsx 文件中

 require('leaflet/dist/leaflet.css');

但得到以下错误

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.

如果我可以访问 index.html，我可以将它添加到那里，但是我使用 webpack，我不清楚该怎么做？

Answer 1

我通过简单地导入 CSS 来解决它：

import 'leaflet/dist/leaflet.css';

Answer 2

这段代码对我有用。

1/直接从leaflet导入leaflet.css（位于node_modules内部）

2/添加useEffect，其中替换地图标记图标（默认情况下，在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>
  );
};

Answer 3

好的，所以我从 Survivaljs 的 Juho Veps\xc3\xa4l\xc3\xa4inen 那里得到了帮助。他的建议是

\n\n

为了让它找到 Leaflet CSS，你应该确保在你的 webpack 配置中包含 leaflet/dist/leaflet.css 的路径。如果您一直在关注该材料，那么您可能有一个样式路径设置（PATHS.style）。沿着 path.resolve(__dirname, \'node_modules/leaflet/dist/leaflet.css\') 放置一些东西应该可以解决问题。

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n

Answer 4

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

/* map.css */

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

例如，此文件可能是map.css. 我还将任何自定义地图 css 样式放在此文件中。

然后在我使用Map组件的javascript / jsx 文件中，我导入这个 css 文件：

// map.js

import './map.css'