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

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.

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

@shama

@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

@MrBackKom

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

cant get it to work still

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

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

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

@MrBackKom

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)

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

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

(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?

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

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

Description

Activity

MrBackKom commented on Jan 11, 2016

MrBackKom commented on Jan 11, 2016

shama commented on Jan 11, 2016

imerkle commented on Jul 23, 2017

shama commented on Jul 24, 2017

imerkle commented on Jul 24, 2017

paraofheaven commented on Aug 11, 2017

RamiroIsBack commented on Feb 22, 2018

dkarpov commented on Jul 18, 2018

matinsoleil commented on Dec 17, 2018

HimanshuRawani commented on Oct 25, 2019

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions