当我使用 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")
)

这样，效果不错，肯定是第一种方法有问题，谢谢~

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

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

something wrong when i using webpack in packing my css file

javascript

webpack

webpack-style-loader