Question

我使用survivaljs.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，我不清楚该怎么做？

Answer 1

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

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

Answer 2

好的，所以我从JuhoVepsä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]"}
]
}

Answer 3

此代码对我有用。

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

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 4

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

就我而言，它是index.jade。使用传单和reactJS实现了开放的街道地图。

Answer 5

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

/* map.css */

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

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

然后在使用Map组件的javascript / jsx文件中，导入以下CSS文件：

// map.js

import './map.css'

Answer 6

我通过像这样简单地导入CSS来解决了这个问题：

import 'leaflet/dist/leaflet.css';

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

6 个答案: