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

Michael Jungo · Accepted Answer · 2017-03-22 21:41:56Z

2

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

answered Mar 22, 2017 at 21:41

Michael Jungo

33.2k4 gold badges97 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rokas · Accepted Answer · 2017-03-22 07:56:17Z

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, 2017 at 7:56

rokas

1,5899 silver badges16 bronze badges

3 Comments

h_h Over a year ago

I have changed it to test: /\.css$/, but getting another error screencast.com/t/vY1pw0bsh

rokas Over a year ago

Install packages: npm i --save extract-text-webpack-plugin style-loader

h_h Over a year ago

again getting You may need an appropriate loader to handle this file type.

Collectives™ on Stack Overflow

Webpack config with css loader

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related