当我使用 webpack 打包我的 css 文件时出现问题

Question

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

我的网络配置文件：

  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