0

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 file list

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: ERR

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~

L.Ann
  • 88
  • 9

1 Answers1

2

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
Sagiv b.g
  • 30,379
  • 9
  • 68
  • 99
  • another question,why this order must style-loader before? and how can I know this part of knowledge? – L.Ann Apr 25 '17 at 09:00
  • `style-loader` responsible for embedding the style to the page. `css-loader` resolve `@import` and url's etc. you can read more about the difference here http://stackoverflow.com/a/34237524/3148807. i found out the same way you did, after much time of struggle and then read it somewhere (can't find it now). you can see the docs and comments about the lack of explanation about the importance of the order. https://webpack.github.io/docs/stylesheets.html – Sagiv b.g Apr 25 '17 at 09:10