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

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]"}
]
}