The issue for 'You may need an appropriate loader to handle this file type.'

[MrBackKom]

I have seen your video about webpack on Youtube.Thank you very much. But I meet a problem during code your example in the video.

In the webpack.config.js,I typed this below,

module.exports = {
    entry:'./index.js',
    output:{
        path:__dirname,
        filename:'bundle.js'
    },
    module:{
        loaders:[{
                test:'/\.css$/',loader:'style!css!'
        }]
    }
}

in the bear.js

var bearcss = require('./bear.css');
....

but when I run npm start, an Error happend

ERROR in ./bear.css
Module parse failed: /Users/mrbackkom/getting-start-webpack/bear.css Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| @import 'base.css';
|
| div{
 @ ./bear.js 11:14-35

I do not find the reason.

[MrBackKom]

I have installed the style-loader & css-loader by parameter --save-dev and this is the json content below.

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "test webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server ./index.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.23.1",
    "jquery": "^2.2.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.10",
    "webpack-dev-server": "^1.14.0"
  }
}

[MrBackKom]

@shama I have find the cause of the problem

loaders:[{
                test:'/\.css$/',
                loader:'style!css!'
        }]

It should be

loaders:[{
                test: /\.css$/,
                loader:'style!css!'
        }]

It's my mistake,thanks a lot

[shama]

Oh great catch @MrBackKom! Glad you figured it out!

[imerkle]

cant get it to work still

[shama]

@dsslimshaddy You config or error might be slightly different. Feel free to post it and we might be able to help.

[imerkle]

Yes its fixed. Problem was with extract-text-webpack-plugin . i was using older version. after upgrading to latest it was fixed

[ghost]

@dsslimshaddy What version of extract-text-webpack-plugin are you using, I am seeing this on ^3.0.0.

[paraofheaven]

@dsslimshaddy,but I want to use webpack 1.0, the latest version need webpack 2.0,what should I do?

[RamiroIsBack]

hello there! @MrBackKom solution worked for me thanks!, with just one slight variation: If you get the latest version of the css-loader, doesn't allow you to write:

loaders:[{
                test: /\.css$/,
                loader:'style!css!'
            }]

on the webpack.config.js instead you have to write:

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

It is here, in the usage section, in their repo : (https://github.com/webpack-contrib/css-loader)

[dkarpov]

this should help { test: /\.(css|less)$/, use: ["style-loader", "css-loader", "less-loader"] }

[matinsoleil]

Work for me

 module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        loader: 'babel-loader'
      },
      {
        test: /\.(css|less)$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },

[HimanshuRawani]

(css|less) worked for me too. But m bit unsure that, if less file are be picked up by less-loader, or traditionally it is being managed by css-loader only. Could anyone please comment in here to clarify?