something wrong when i using webpack in packing my css file

Question

I am using webpack to pack my css file ,my webpack version is 2.4.1 ,I follow the official document webconfig method to use loader;

my webconfig file:

  var path=require("path");
module.exports={
    entry:"./js/main.js",
    output:{
        path:path.join(__dirname,"js/build"),
        filename:"bundle.js"
    },
    module: {
        loaders: [
          {test:/\.css$/,loader:"css-loader!style-loader"},
          {test: /\.js$/, loader: 'jsx-loader'}
        ]
    }
}

main.js

// my entry file main.js
var React=require("react");
var path=require("path")
var ReactDOM=require("react-dom");
var MessageBoard=require("../component/messageBoard");

require("../css/main.css"); //I require the css file there

ReactDOM.render(<MessageBoard title="message"/>,
      document.getElementById("container")
)

the Errorlog:

then,I dont know why,so I try the another way

  module: {
        loaders: [
          //{test:/\.css$/,loader:"css-loader!style-loader"}, I delete this config
          {test: /\.js$/, loader: 'jsx-loader'}
        ]
    }

main.js

var React=require("react");
var path=require("path")
var ReactDOM=require("react-dom");
var MessageBoard=require("../component/messageBoard");

require("style-loader!css-loader!../css/main.css");//use this way

ReactDOM.render(<MessageBoard title="message"/>,
      document.getElementById("container")
)

in this way ,It work well,so I must did something wrong in the first method,thx~

Answer 1

your loaders are in a reversed order.

change this:

{test:/\.css$/,loader:"css-loader!style-loader"}  

to this:

{test:/\.css$/,loader:"style-loader!css-loader"}

the order of loaders is from right to left.

this works because its in the right order:

require("style-loader!css-loader!../css/main.css");//use this way