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~

Sagiv b.g · Accepted Answer · 2017-04-25 08:55:09Z

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

answered Apr 25, 2017 at 8:55

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

L.Ann Over a year ago

another question,why this order must style-loader before? and how can I know this part of knowledge?

Sagiv b.g Over a year ago

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 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. webpack.github.io/docs/stylesheets.html

Collectives™ on Stack Overflow

something wrong when i using webpack in packing my css file

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related