How to include “leaflet.css” in a React app with webpack?

Question

I using the survivejs.com site as a template to build a map based React app with webpack. For the map i am using leaflet but i can\'t find a way to add the leaflet.css. With

Answer 1

This code worked for me.

1/ Import leaflet.css directly from leaflet (located inside of node_modules)

2/ Add useEffect, where replace map marker icons (by default markers were not visible, after leaflet.css import)

3/ Render any leaflet components

Answer 2

OK So i got help from Juho Vepsäläinen from survivejs on this. HIs advice was to

To make it find Leaflet CSS, you should make sure to include the path to leaflet/dist/leaflet.css at your webpack configuration. You likely have a style path setting (PATHS.style) there if you have been following the material. Having something along path.resolve(__dirname, 'node_modules/leaflet/dist/leaflet.css') should do the trick.

I followed his advice and added the following to webpack.config file:

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

but i also needed to add a file loader later on

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

Answer 3

In my applications that use webpack (via create-react-app) I add the following line to the top of my css file relevant for maps:

/* map.css */

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

For example, this file could be map.css. I also put any custom map css styles in this file.

Then in my javascript / jsx file that uses the Map Component, I import this css file:

// map.js

import './map.css'

Answer 4

Webpack can't parse CSS without some help from a loader. The most commonly used CSS loader is webpack/css-loader.

I disagree with the answer from Lakshman Diwaakar in that I think it is extremely beneficial to import component specific CSS files within the JSX of that component, as it allows all the relevant code for that component to live in one place. If I remove the component, then that CSS is no longer part of any build. If I want to re-use a component then the CSS is right there to go with it.

Answer 5

I have worked with leaflet and adding the leaflet to the index.html worked correctly. Usually, you dont add CSS files in JSX. All styling and external libraries are added in the index.html.

In my case it is index.jade. Implemented the open street map using leaflet and reactJS.

Answer 6

I solved it by simply importing the CSS like this:

import 'leaflet/dist/leaflet.css';