Update importLoaders section of docs with some more examples and copy

[aorinevo]

Do you want to request a feature or report a bug?

The request is for an update to the importLoaders section in the README file.

What is the current behavior?

Documentation on importLoaders seems to be confusing to some developers. I struggled with it myself.

Here are some examples:

• Clarify importLoaders documentation? #228
• About importloaders usage problem #528
• https://medium.com/front-end-hacking/webpack-by-example-part-5-caaec7608927

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

Documentation should contain more examples and copy on the use cases for importLoaders.

If this is a feature request, what is motivation or use case for changing the behavior?

Help clear up confusion about how to use importLoaders query parameter.

Please mention other relevant information such as your webpack version, Node.js version and Operating System.

[aorinevo]

Below is my understanding of importLoaders.

In the given example, when importLoaders is set to 2, sass-loader gets applied to @import'd lines first. But sass-loader is never applied because all sass files end in .scss while the test regexp is for .css files only.

Even in the case when the test regexp includes sass files (i.e. /\.(css|scss)$/), @import'd lines in sass files for .css files would be left as @import'd lines - that's just the behavior of sass compilers. Also, css files would never contain @import'd lines for sass files. As a result, the sass-loader has to be applied first and that's already taken care of by the position of the loader in the use array.

It's important to note that sass-loader outputs css, allowing for the option to apply other css loaders, like postcss-loader and css-loader.

Continuing with the example, in the case when importLoaders is set to 2 and test regexp is set to /\.(css|scss)$/, postcss-loader would get applied to @imported'd lines next and finally css-loader. Note that this is already taken care of by the order of the loaders in the use array. To have css-loader apply first, without changing the order of the loaders in the array, change the value of importLoaders to 0.

It's interesting to note that when test is set to /\.(css|scss)$/, regardless of the value of importLoaders - 0, 1, or 2, the output is the same. As discussed before, the sass-loader must be applied first, after that applying css-loader and then postcss-loader or vice-versa, is expected to return the same css. That is, adding browser-prefixes before or after css-loader, results in the same css.

[aorinevo]

Also see @guidobouman excellent explanation here #228 (comment).

[alexander-akait]

@aorinevo feel free to a PR

[alexander-akait]

Closing due to inactivity. Feel free to feedback or send a PR.