[Solved]-Error: Cannot resolve module 'style-loader'-Reactjs

it is very simple you have to install the fist syle-loader the css-loader.

If you're node_modules are on the same dir as your webpack config file you can simply add context: __dirname.

module.exports = {
    context: __dirname,
    entry: [
    ...

(works in both webpack 1 and 2)

I use Windows and did everything but nothing worked. It appeared console didn't have enough permissions. So, after running in Admin mode I re-entered

npm install

and everything worked. You can see the result by appearing a lot of modules in node_modules directory.

Under Webpack 3, with node_module in a non-standard location, I had to use both resolve and resolveLoader configuration objects:

resolve: {
  modules: ["build-resource/js/node_modules"]
},
resolveLoader: {
  modules: ["build-resource/js/node_modules"]
},

I wanted to add on to what David Guan said. In the newer versions of Webpack (V2+) moduleDirectories has been replaced with modules. The updated resolve portion of his answer would look like this:

resolve: {
    extensions: ['.js', '.jsx', '.css'], //An empty string is no longer required.
    modules: [
      'node_modules'
    ]        
}

For more information you can check out their official documentation. Hope this helps someone out there.

If you try to import a css file with this line:

import '../css/style.css';

and have added the style-loader in your webpack config.

The error states:

Module not found: Error: Cannot resolve module 'style-loader'

the module named "style-loader" is not resolved.

You need to install that module with:

$ npm install style-loader --save

Or, if you're using yarn:

$ yarn add style-loader

Then run webpack again.

Please run this script:

 npm install style-loader css-loader --save

Set your module as below:

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      loader: 'babel-loader',
      include: path.join(_dirname, 'app')
    },
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }
  ],
  resolve: {
      extensions: ['', '.js', '.jsx', '.css']
  }
}

It's basically reading as for loaders - test jsx using babel-loader and the next test is a css file using style-loader and css-loader, which will recognize the modules. Also, you should exit out of npm start, and run "npm install" and run "npm start". Hopefully, this should take care of the issue.