CODEWITHSUNDEEP
javascriptreactjswebpackwebpack-style-loader
Rahul Dagli
Rahul Dagli

Reputation: 4502

Error: Cannot resolve module 'style-loader'

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' in import.js file although i've specified the file path correctly.

import '../css/style.css';
import React from 'react';
import ReactDOM from 'react-dom';
import jQuery from 'jquery';
import TopicsList from '../components/topic-list.jsx';
import Layout from '../components/layout.jsx';

webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: [
      // Set up an ES6-ish environment
      'babel-polyfill',

      // Add your application's scripts below
      APP_DIR + '/import.js'
    ],
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',

                exclude: /node_modules/,
                query: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015', 'stage-0', 'react']
                }
            },
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ],
        resolve: {
            extensions: ['', '.js', '.jsx', '.css']
        }
    }
};

Upvotes: 106

Views: 117698

Answers (10)

Rusaln Lutfullin
Rusaln Lutfullin

Reputation: 1

You have to add to your dependencies

npm i style-loader css-loader

Upvotes: 0

Debashis Chowdhury
Debashis Chowdhury

Reputation: 624

remove 'style-loader!css-loader', make it ['style-loader','css-loader'] remove empty string '' from extensions array. It will be look like bellow

module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            
        ]
    },
    
    resolve: {
        extensions: ['.js', '.jsx', '.css'],   
    },

Upvotes: 0

sealocal
sealocal

Reputation: 12477

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-dev

Or, if you're using yarn:

$ yarn add style-loader -D

Then run webpack again.

Upvotes: 23

Vivek Gupta
Vivek Gupta

Reputation: 5

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

Upvotes: -2

StephenSolace
StephenSolace

Reputation: 469

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.

Upvotes: 15

sinistral
sinistral

Reputation: 115

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

Upvotes: 11

Turkhan Badalov
Turkhan Badalov

Reputation: 934

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.

Upvotes: 2

Daniel
Daniel

Reputation: 6491

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)

Upvotes: 1

David Guan
David Guan

Reputation: 4300

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

Upvotes: 111

PKA
PKA

Reputation: 515

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.

Upvotes: 32

Related Questions