title: webpack2 sass-loader – Module not found: Error: Can't resolve '' (empty string)
body: <p>I'm having a hard time loading a sass file with webpack2. 
  At least I think that's the problem because if I comment out the sass loading row the error doesn't appear.</p>
  
  <p>This is how I load the sass file from App.jsx <code>require('./../../style/style.scss')</code></p>
  
  <p>I get the following error:</p>
  
  <pre><code>ERROR in ./src/components/App.jsx
  Module not found: Error: Can't resolve '' in '/Users/user/code/my_site.com'
  resolve '' in '/Users/user/code/my_site.com'
    using description file: /Users/user/code/my_site.com/package.json (relative path: .)
    after using description file: /Users/user/code/my_site.com/package.json (relative path: .)
      using description file: /Users/user/code/my_site.com/package.json (relative path: .)
        no extension
          /Users/user/code/my_site.com is not a file
        .js
          /Users/user/code/my_site.com.js doesn't exist
        .json
          /Users/user/code/my_site.com.json doesn't exist
        as directory
          existing directory
            using path: /Users/user/code/my_site.com/index
              using description file: /Users/user/code/my_site.com/package.json (relative path: ./index)
                no extension
                  /Users/user/code/my_site.com/index doesn't exist
                .js
                  /Users/user/code/my_site.com/index.js doesn't exist
                .json
                  /Users/user/code/my_site.com/index.json doesn't exist
            use ./index.js from main in package.json
              using description file: /Users/user/code/my_site.com/package.json (relative path: .)
              after using description file: /Users/user/code/my_site.com/package.json (relative path: .)
                using description file: /Users/user/code/my_site.com/package.json (relative path: ./index.js)
                  as directory
                    /Users/user/code/my_site.com/index.js doesn't exist
                  no extension
                    /Users/user/code/my_site.com/index.js doesn't exist
                  .js
                    /Users/user/code/my_site.com/index.js.js doesn't exist
                  .json
                    /Users/user/code/my_site.com/index.js.json doesn't exist
  [/Users/user/code/my_site.com]
  [/Users/user/code/my_site.com.js]
  [/Users/user/code/my_site.com.json]
  [/Users/user/code/my_site.com/index]
  [/Users/user/code/my_site.com/index.js]
  [/Users/user/code/my_site.com/index.js]
  [/Users/user/code/my_site.com/index.js]
  [/Users/user/code/my_site.com/index.json]
  [/Users/user/code/my_site.com/index.js.js]
  [/Users/user/code/my_site.com/index.js.json]
   @ ./src/components/App.jsx 33:0-35
   @ ./src/index.jsx
   @ multi ./src/index.jsx ./src/index.jsx
  </code></pre>
  
  <p>My webpack.config:</p>
  
  <pre><code>var webpack = require("webpack")
  var path = require("path")
  module.exports = {
    entry: './src/index.jsx',
    output: { path: path.join(__dirname, "./build/"), filename: 'bundle.js' },
    devtool: 'source-map',
    module: {
      loaders: [
        { test: /^((?!config).)*\.jsx?$/, loader: 'babel-loader',
          exclude: /node-modules/,
          query: { presets: ['es2015', 'react'] }
        },
        { test: /\.css$/, loader: 'style-loader!css-loader!' }, 
        { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader!?sourceMap=true' }, 
        { test: /\.(woff|woff2)$/,  loader: "url-loader?limit=10000&amp;mimetype=application/font-woff" },
        { test: /\.ttf$/, loader: "file-loader" },
        { test: /\.eot$/, loader: "file-loader" },
        { test: /\.svg$/, loader: "file-loader" }
      ]
    }
  }
  </code></pre>
  
  <p>I also tried using the new <code>rules: ...</code> - <code>use: ...</code> syntax but without luck.
  Maybe I'm missing something on how loaders work?</p>