Module not found: Error: Cannot resolve 'file' or 'directory' when require a css file inside a directive

Question

From an angular+webpack tutorial, a "directives" folder was created which contains a declaration for the following custom directive

export default ngModule => {
    ngModule.directive('kcdHello', () => {
        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";
            }
        }
    });
}

(notice the require statement before its return)

in the webpack.config.js the style loader and css loader are declared in the module section :

  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/] 
        }
      ]
    }
}

but i got the following error when "npm start" saying that the Module not found: Error: Cannot resolve 'file' or 'directory' .. :

$ npm start

> webpack-ng-egg@1.0.0 start M:\Learning webpack\egghead.io - AngularJS - Angula
r and Webpack for Modular Applications\webpack-ng-egg
> 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.

Answer 1

after looking more for the solution, i found this answer to a same issue and the solution was to use path.resolve in the webpack.config context property like this :

module.exports = {
    context: require('path').resolve(__dirname, "app"),
    entry:'./app.js',
    output: {
        path : __dirname + '/app',
        filename:'bundle.js'
    },
   (...)

this problem happen as i'm running the app on windows (see this)