Imported less files are not being prefixed

see https://github.com/Dakuan/postcss-webpack-bug

bar.less imports foo.less,

bar gets prefixed correctly: https://github.com/Dakuan/postcss-webpack-bug/blob/master/bug.css#L6

but foo gets ignored: https://github.com/Dakuan/postcss-webpack-bug/blob/master/bug.css#L2

[badsyntax]

@avindra @Dakuan

It’s been a while since I’ve used webpack and i’d be damned if I knew the point of these loaders anymore. I hate you so much webpack.

css-loader expects CSS code, there’s nothing more to it than that. pass in your final compiled CSS into css-loader.

I guess the output of css-loader is not a stream of CSS, thus you can’t pipe that ouput into postcss-loader.

• style-loader|css-loader is the way to do it just with css
• style-loader|css-loader|postcss-loader is the way to post-process css
• style-loader|css-loader|less-loader is the way to do it if you want to use less
• style-loader|css-loader|postcss-loader|less-loader is the way to post-process the compiled less (css)

[badsyntax]

As I understand it, you need to pipe the output of the compiled css into the css-loader. Thus, this should be the correct order:

ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader")

…which results in:

.foo {
  background-color: red;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.bar {
  background-color: yellow;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}