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

Posted 2023-02-22

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

【英文标题】：How to include "leaflet.css" in a React app with webpack?

【发布时间】：2017-04-04 19:40:22

【问题描述】：

我使用survivorjs.com 站点作为模板，使用webpack 构建基于地图的React 应用程序。对于我使用传单的地图，但我找不到添加leaflet.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，我不清楚如何执行此操作？

【参考方案1】：

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

import 'leaflet/dist/leaflet.css';

【参考方案2】：

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

/* map.css */

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

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

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

// map.js

import './map.css'

【讨论】：

它也适用于scss。比如在map.scss中导入如答案所示，map.scss是组件导入的。

【参考方案3】：

没有加载器的帮助，Webpack 无法解析 CSS。最常用的 CSS 加载器是webpack/css-loader。

我不同意 Lakshman Diwaakar 的回答，因为我认为在该组件的 JSX 中导入特定于组件的 CSS 文件非常有益，因为它允许该组件的所有相关代码存在于一个地方。如果我删除该组件，那么该 CSS 将不再是任何构建的一部分。如果我想重用一个组件，那么 CSS 就在那里。

【参考方案4】：

好的，所以我从survivaljs 那里得到了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]"
]

【讨论】：

但是你为什么要添加 png/jpg 文件加载器，你需要一个 css 加载器 test: /\.css$/, loader: "style-loader!css-loader" ,

我会支持另一个 Alex，通常推荐以这种方式使用 css-loader。

我猜 png/jpg 加载器是因为在 CSS 中有对这些文件类型的引用，并且希望 webpack 也能处理这些图像。

2017 年人们发现这个：现在是 rules 而不是 loaders 和 use 而不是 loader。

【参考方案5】：

这段代码对我有用。

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

【参考方案6】：

我使用了传单并将传单添加到 index.html 工作正常。通常，您不会在 JSX 中添加 CSS 文件。所有样式和外部库都添加到 index.html 中。

在我的例子中是index.jade。使用传单和 reactJS 实现了开放的街道地图。