title: Webpack2 not understanding @import statement in my SASS files (How to compile SASS with webpack2?)
body: <p><a href="https://webpack.js.org" rel="nofollow noreferrer"><strong>Using Webpack 2</strong></a> and <a href="https://github.com/jtangelder/sass-loader" rel="nofollow noreferrer"><strong>sass-loader</strong></a> 4.11</p>
  
  <p><code>webpack --config webpack.config.js</code></p>
  
  <p><a href="https://i.stack.imgur.com/C9CXC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C9CXC.png" alt="enter image description here"></a></p>
  
  <p>Here is my webpack.config.js</p>
  
  <pre><code>var path = require('path');
  var sass = require("./sass/lifeleveler.scss");
  
  module.exports = {
      entry: './dist/main.js',
      output: {
          filename: 'lifeleveler.app.js',
          path: path.resolve(__dirname, 'dist')
      },
      watch: true,
      watchOptions: {
          aggregateTimeout: 300,
          poll: 1000,
          ignored: /node_modules/
      },
      module: {
          loaders: [
              {
                  test: /\.scss$/,
                  include: [
                      path.resolve(__dirname, 'node_modules'),
                      path.resolve(__dirname, './sass')
                  ],
                  loaders: ["style-loader", "css-loader", "sass-loader"]
              }
          ],
          rules: [
              {
                  test: /\.tsx?$/,
                  loader: 'ts-loader',
                  exclude: /node_modules/,
              },
              {
                  enforce: 'pre',
                  test: /\.tsx?$/,
                  use: "source-map-loader"
              }
          ]
      },
      sassLoader: {
          includePaths: [path.resolve(__dirname, "./sass")]
      },
      resolve: {
          modulesDirectories: ['./sass'],
          extensions: [".tsx", ".ts", ".js", "scss"]
      },
      devtool: 'inline-source-map'
  };
  </code></pre>
  
  <hr>
  
  <p>Note when I tried this at the top of my config:</p>
  
  <pre><code>var css = require("!raw-loader!sass-loader!./sass/lifeleveler.scss");
  var css = require("!css-loader!sass-loader!./sass/lifeleveler.scss");
  </code></pre>
  
  <p>Got this error: </p>
  
  <blockquote>
    <p>Error: Cannot find module '!raw-loader!sass-loader!./sass/lifeleveler.scss'</p>
  </blockquote>
  
  <p>Which is why I went with just this: <code>var sass = require("./sass/lifeleveler.scss");</code></p>
  
  <hr>
  
  <p>And my lifeleveler.scss file (<a href="https://github.com/leongaban/sass-smacss" rel="nofollow noreferrer">from my SASS project starter kit</a>):</p>
  
  <pre><code>@import "vendors/normalize";    // Normalize stylesheet
  @import "vendors/reset";        // Reset stylesheet
  @import "modules/base";         // Load base files
  @import "modules/defaults";     // Defaults elements
  @import "modules/inputs";       // Inputs &amp; Selects
  @import "modules/buttons";      // Buttons
  @import "modules/layout";       // Load Layouts
  @import "modules/svg";          // Load SVG
  @import "modules/queries";      // Media Queries
  </code></pre>
  
  <p>Any finally my folder structure, do you see any glaring issues?</p>
  
  <p><a href="https://i.stack.imgur.com/FFxXe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FFxXe.png" alt="enter image description here"></a></p>
  
  <p><a href="https://stackoverflow.com/questions/31004689/webpacks-sass-loader-do-not-find-foundation-scss-file-without-underline-prefix">I found this solution here</a>, however I added my <code>./sass</code> path to the <code>modulesDirectories</code> array and still getting the error.</p>
  
  <p>After more digging I also found <a href="https://github.com/jtangelder/sass-loader/issues/344" rel="nofollow noreferrer">this Github issue and solution here</a>, but his fix didn't work for me either :(</p>