我在使用webpack打包我的css文件时出错了

Question

我使用webpack打包我的css文件，我的webpack版本是2.4.1，我按照官方文档webconfig method to use loader;

我的webconfig文件：

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

错误日志：

然后，我不知道为什么，所以我尝试另一种方式

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

这样，它运作良好，所以我必须在第一种方法中做错了，thx~

Answer 1

你的装载机处于相反的顺序。

改变这个：

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

到此：

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

装载机的顺序是从右到左。

这是有效的，因为它的顺序正确：

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