title: “You may need an appropriate loader to handle this file type” with Webpack and CSS
body: <p>I an new to webpack, and I have been able to get it to packup my javascript, but the CSS eludes me. I keep getting a:</p>
  
  <p>“You may need an appropriate loader to handle this file type”</p>
  
  <p>One the first line of my css file. The CSS file is simple:</p>
  
  <pre><code>body {
      color:red
  }
  </code></pre>
  
  <p>The webpack.config.js looks like this:</p>
  
  <pre><code>module.exports = {
      debug: true,
      entry: [ './sdocs.js' ],
      output: {
          filename: './[name].bundle.js'
      },
      loaders: [
          { test: /\.css$/, loader: "style-loader!css-loader" },
      ],
  }
  </code></pre>
  
  <p>sdocs.js is also simple and looks like this:</p>
  
  <pre><code>require('./sdocs.css');
  </code></pre>
  
  <p>Finally the result of running webpack look like this:</p>
  
  <pre><code>ERROR in ./sdocs.css
  Module parse failed: C:\Users\Tim\PhpstormProjects\xxx\sdocs.css
  Unexpected token (1:5)
  You may need an appropriate loader to handle this file type.
  SyntaxError: Unexpected token (1:5)
  at Parser.pp.raise (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:923:13)
  at Parser.pp.unexpected (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1490:8)
  at Parser.pp.semicolon (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1469:73)
  at Parser.pp.parseExpressionStatement (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1994:8)
  at Parser.pp.parseStatement (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1772:188)
  at Parser.pp.parseTopLevel (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1666:21)
  at Parser.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1632:17)
  at Object.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:885:44)
  at Parser.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack\lib\Parser.js:902:15)
  at DependenciesBlock.&lt;anonymous&gt; (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack\lib\NormalModule.js:104:16)
  at DependenciesBlock.onModuleBuild (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
  at nextLoader (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
  at C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
  at Storage.finished (C:\Users\Tim\PhpstormProjects\xxx\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
  at C:\Users\Tim\PhpstormProjects\xxx\node_modules\graceful-fs\graceful-fs.js:78:16
  at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3) @ ./sdocs.js 1:0-22
  </code></pre>
  
  <p>I have triple checked, css-loader and style-loader are loaded at the local level. I had them installed globally at first, but i removed them globally and reinstalled them locally. BTW, the debug flag did nothing extra, no change in output, which i thought was weird.</p>
  
  <p>I am running on a windows platform is that matters</p>