webpackcss-loader

Cannot resolve module 'css-loader'


Here's my webpack.config.js. I can't make it work. Besides that code, I provide 'import '../style.css' to my root component. I split the code to 2 bundles and want to get the third, this time with the css. However, it doesn't work.

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

module.exports = {
  entry: {
  app: ['./src/App.jsx'],
  vendor: ['react','react-dom','whatwg-fetch','babel-polyfill','react- 
         router','react-router-bootstrap','react-bootstrap'],
 },

  output: {
  path:path.resolve(__dirname,'static'),
  filename: 'app.bundle.js',  
},
module: {
 loaders: [  
{
  test: /\.css$/,
 loader: 'style-loader'
},   
{
  test: /\.css$/,
 loader: 'css-loader'
 },      
    {
      test: /\.jsx$/,
      loader: 'babel-loader',
      query: {
         presets: ['react','es2015']
    }, 
  },
 ],
   resolve: {
      extensions:['.js','.jsx','.css'],
   },
 },
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor','vendor.bundle.js'), 
  ],
}

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


Solution

  • Make sure you have the css-loader and style-loader modules installed

    npm install style-loader css-loader --save-dev

    You can also chain your loaders together so that you only have one rule block for your css

    test: /\.css$/,
    use: [
        {
            loader: 'style-loader'
        },
        {
            loader: 'css-loader'
        }
    ]