Webpack config with css loader

Question

I have been using this webpack config for loading babel and css loaders, but getting error. My webpack config works very well, if I use only babel loader, but css loader isn't working.

var path = require('path');

var config = {
   entry: './main.js',

   output: {
      path : path.join(__dirname, './'),
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         },
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'style-loader!css-loader',
         }
      ]
   }
}

module.exports = config;

The error I am getting while running webpack is

ERROR in ./~/css-loader!./main.js

Error screenshot

score 2 · Answer 1 · answered Mar 22 '17 at 21:41

You need to configure the CSS loaders for imports matching .css not .jsx. Right now you're passing a JavaScript file to the css-loader, which isn't valid CSS, so it fails. The correct loader configuration is:

module: {
    loaders: [
      {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['es2015', 'react']
          }
      },
      {
          test: /\.css$/,
          loader: 'style-loader!css-loader',
      }
    ]
}

score 0 · Answer 2 · answered Mar 22 '17 at 07:56

0

You need style loader in your webpack config:

Example from one of my projects:

var ExtractTextPlugin = require("extract-text-webpack-plugin");
...
module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css")
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css!sass")
            },
        ],
    },
...

answered Mar 22 '17 at 07:56

rokas

1,521
9
16

I have changed it to test: /\.css$/, but getting another error https://www.screencast.com/t/vY1pw0bsh – h_h Mar 22 '17 at 07:59
Install packages: `npm i --save extract-text-webpack-plugin style-loader` – rokas Mar 22 '17 at 08:01
again getting You may need an appropriate loader to handle this file type. – h_h Mar 22 '17 at 08:07

Webpack config with css loader

2 Answers2