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. Without this the map tiles are displayed in the wrong order.

I have tried adding the leaflet.css to the App.jsx file using this

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

but get the following error

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.

If I had access to the index.html i could add it there but i with webpack, i'm unclear how to do this?

Answer 1

I solved it by simply importing the CSS like this:

import 'leaflet/dist/leaflet.css';

Answer 2

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.