Error: Cannot resolve module 'style-loader'

Question

I\'m using style-loader with webpack and react framework. When I run webpack in terminal i\'m getting Module not found: Error: Cannot resolve module \'style-loader\'

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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"]
},

Answer 5

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)

Answer 6

Try run script below:

npm install style-loader --save

Modify webpack config, add modulesDirectories field in resolve.

    resolve: {
        extensions: ['', '.js', '.jsx', '.css'],
        modulesDirectories: [
          'node_modules'
        ]        
    }