title: webpack - require('node_modules/leaflet/leaflet.css')
body: <p>So I'm trying to build a map app using <code>webpack</code> and <code>leaflet</code>. I can require <code>leaflet.js</code> from my <code>map.js</code> file, but I can't call leaflet.css without getting an error.</p>
  
  <p>My current <code>webpack.config.js</code> looks like:</p>
  
  <pre><code>'use strict'
  
  var webpack = require('webpack'),
      path = require('path'),
      HtmlWebpackPlugin = require('html-webpack-plugin'),
      srcPath = path.join(__dirname, 'src');
  
  module.exports = {
      target: "web",
      cache: true,
      entry: {
          app: path.join(srcPath, "index.js")
      },
      resolve: {
          alais: {
              leaflet_css: __dirname + "/node_modules/leaflet/dist/leaflet.css"
          }
      },
      module: {
          loaders: [
            {test: /\.js?$/, exclude: /node_modules/, loader: "babel-loader"},
            {test: /\.scss?$/, exclude: /node_modules/, loader: "style!css!sass!"},
            {test: /\.css?$/, loader: "style!css!"}
          ]
      },
      plugins: [
          new webpack.optimize.CommonsChunkPlugin("common", "common.js"),
          new HtmlWebpackPlugin({
            inject: true,
            template: "src/index.html"
          }),
          new webpack.NoErrorsPlugin()
        ],
      output: {
          path: path.join(__dirname, "dist"),
          publicPath: "/dist/",
          filename: "[name].js",
          pathInfo: true
      }
  }
  </code></pre>
  
  <p>And my <code>main.js</code> file looks like:</p>
  
  <pre><code>var $ = require('jquery'),
      leaflet = require('leaflet');
  
  require("./sass/main.scss");
  require("leaflet_css");
  
  var map = L.map('map').setView([51.505, -0.09], 13);
  
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
  }).addTo(map);
  
  L.marker([51.5, -0.09]).addTo(map)
      .bindPopup('A pretty CSS3 popup.&lt;br&gt; Easily customizable.')
      .openPopup();
  
  console.log('I got called');
  </code></pre>
  
  <p>What is the correct approach of bundling css files from 3rd party suppliers via webpack? </p>
  
  <p>I saw <a href="https://github.com/Summer-Top/single-page-react-webpack" rel="noreferrer">this project</a> were <code>leaflet</code> is stored in the libs directory... what's the reason for this, why store it in the <code>libs</code> directory if it is installed into the <code>node_modules</code> direcory via <code>npm</code>? </p>
  
  <p>This is very much a learning exercise so any pointers are greatly appreciated! :)</p>