title: Module not found: Error: Cannot resolve 'file' or 'directory' when require a css file inside a directive
body: <p>From an angular+webpack tutorial, a "directives" folder was created which contains a declaration for the following custom directive</p>
  
  <pre><code>export default ngModule =&gt; {
      ngModule.directive('kcdHello', () =&gt; {
          require('./kcd-hello.css');
          return {
              restrict:'E',
              scope:{},
              template:require('./kcd-hello.html'),
              controllerAs:'vm',
              controller:function(){
                  const vm = this;
                  vm.greeting = "Hello Webpack!!6";
              }
          }
      });
  }
  </code></pre>
  
  <p>(notice the require statement before its return)</p>
  
  <p>in the webpack.config.js the style loader and css loader are declared in the module section :</p>
  
  <pre><code>  module.exports = {
      context : __dirname + '/app',
      entry:'./app.js',
      output: {
          path : __dirname + '/app',
          filename:'bundle.js'
      },
      module:{
          loaders: [
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel', // 'babel-loader' is also a legal name to reference
            query: {
              presets: ['es2015']
            }
          },
          {
            test: /\.html$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'raw', // 'babel-loader' is also a legal name to reference
          },
          {
            test: /\.css/,
            loaders: ['style', 'css'],
            exclude: [/node_modules/] 
          }
        ]
      }
  }
  </code></pre>
  
  <p>but i got the following error when "npm start" saying that the Module not found: Error: Cannot resolve 'file' or 'directory' .. : </p>
  
  <pre><code>$ npm start
  
  &gt; webpack-ng-egg@1.0.0 start M:\Learning webpack\egghead.io - AngularJS - Angula
  r and Webpack for Modular Applications\webpack-ng-egg
  &gt; webpack-dev-server --content-base app
  
   http://localhost:8080/webpack-dev-server/
  webpack result is served from /
  content is served from M:\Learning webpack\egghead.io - AngularJS - Angular and
  Webpack for Modular Applications\webpack-ng-egg\app
  Hash: 6a876e291da3f59381dc
  Version: webpack 1.13.2
  Time: 2505ms
      Asset     Size  Chunks             Chunk Names
  bundle.js  1.22 MB       0  [emitted]  main
  chunk    {0} bundle.js (main) 1.19 MB [rendered]
      [0] ./app/app.js 435 bytes {0} [built]
      [1] ./~/angular/index.js 48 bytes {0} [built]
      [2] ./~/angular/angular.js 1.19 MB {0} [built]
      [3] ./app/directives/index.js 283 bytes {0} [built]
      [4] ./app/directives/kcd-hello.js 417 bytes {0} [built]
      [5] ./app/directives/kcd-hello.css 931 bytes {0} [built] [2 errors]
      [6] ./app/directives/kcd-hello.html 75 bytes {0} [built]
  
  **ERROR in ./app/directives/kcd-hello.css
  Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modul
  es/css-loader/index.js in M:\Learning webpack\egghead.io - AngularJS - Angular a
  nd Webpack for Modular Applications\webpack-ng-egg/app\directives
   @ ./app/directives/kcd-hello.css 4:14-83
  
  ERROR in ./app/directives/kcd-hello.css
  Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modul
  es/style-loader/addStyles.js in M:\Learning webpack\egghead.io - AngularJS - Ang
  ular and Webpack for Modular Applications\webpack-ng-egg/app\directives
   @ ./app/directives/kcd-hello.css 7:13-71**
  webpack: bundle is now VALID.
  </code></pre>