score:103

Accepted answer

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

score:-1

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

score:1

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)

score: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.

score:11

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

score:13

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.

score:18

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.

score:32

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.


Related Query

More Query from same tag