Webpack style-loader vs css-loader

I have two questions.

1) CSS Loader and Style Loader are two webpack loaders. I couldn't grasp the difference between the two. Why do I have to use two loaders when they both do the same job?

2) What is this .useable.less and .useable.css mentioned in the above Readme.md files?

The CSS loader takes a CSS file and returns the CSS with imports and url(...) resolved via webpack's require functionality:

var css = require("css!./file.css");
// => returns css code from file.css, resolves imports and url(...) 

It doesn't actually do anything with the returned CSS.

The style loader takes CSS and actually inserts it into the page so that the styles are active on the page.

They perform different operations, but it's often useful to chain them together, like Unix pipes. For example, if you were using the Less CSS preprocessor, you could use

require("style!css!less!./file.less")

to

1. Turn file.less into plain CSS with the Less loader
2. Resolve all the imports and url(...)s in the CSS with the CSS loader
3. Insert those styles into the page with the style loader