leaflet.css and webpack css-loader

In the commit https://github.com/Leaflet/Leaflet/commit/e9957cfa02b4201c62e98d43acc23acd5f3f9927 there is the following change:

+.leaflet-default-icon-path {
+   background-image: url(images/);
+   }

But now, in webpack with the css-loader I get the following error:

ERROR in ./~/css-loader!./~/leaflet/dist/leaflet.css
Module not found: Error: Cannot resolve directory './images' in /Users/jmlopez/Workspace/ProjectName/node_modules/leaflet/dist
 @ ./~/css-loader!./~/leaflet/dist/leaflet.css 6:8715-8735

If I make it a proper url to a file then the compilation goes through. Anyone else having this issue? Should I bring this up with https://github.com/webpack/css-loader?

[tthew]

For anyone else landing here and struggling with this, the following webpack2 resolve.alias configuration should enable you to import the leaflet.css regardless of whether you’re using CSS modules or not:

  resolve: {
    // Leaflet image Alias resolutions
    alias: {
      './images/layers.png$': path.resolve(__dirname, '../node_modules/leaflet/dist/images/layers.png'),
      './images/layers-2x.png$': path.resolve(__dirname, '../node_modules/leaflet/dist/images/layers-2x.png'),
      './images/marker-icon.png$': path.resolve(__dirname, '../node_modules/leaflet/dist/images/marker-icon.png'),
      './images/marker-icon-2x.png$': path.resolve(__dirname, '../node_modules/leaflet/dist/images/marker-icon-2x.png'),
      './images/marker-shadow.png$': path.resolve(__dirname, '../node_modules/leaflet/dist/images/marker-shadow.png')
    }
  }

n.b the actual path to the images may differ depending on where your webpack config file is in relation to node_modules

[faelplg]

I think the problem that brought me here is the same. Here is my solution without the need of a workaround.

Obs.: When I started having these errors, I was using html-loader and css-loader, among others for js and json.

Running leaflet with webpack was throwing an error about the .PNG images addresses from leaflet.css. I understood that It was trying to load the images as a CSS. So, the main question was how to provide a file loader in webpack that can read the .PNG files.

There is a package (file-loader) that solved this in a simple way. Below is how I used it:

Packages:

"leaflet": "^1.3.1",
"webpack": "^2.7.0".
"file-loader": "^1.1.11"

In weback.conf.js file, I included this code:

module: {
    loaders: [
      // ...the other loaders for html, css and js
      {
        test: /\.(gif|svg|jpg|png)$/,
        loader: 'file-loader',
      }
    ]
  } // ...the plugins and etc