[v8.x] Docs: Correct the order of loaders in postcss-loader example (#…

…1077)

Since `postcss-loader` must be applied *after* `sass-loader` (and
before `css-loader`) according to:
https://github.com/postcss/postcss-loader#config-cascade

...whereas previously it was being applied *before* `sass-loader`,
since webpack applies loaders in the order of "last to first".

See:
#1066 (comment)

This is the `release/v8` backport of #1076.

docs/packages/style-loader/README.md

@@ -149,18 +149,20 @@ module.exports = {
     test: /\.(css|sass|scss)$/,
     moduleTest: /\.module\.(css|sass|scss)$/,
     loaders: [
-      // Define loaders as objects
+      // Define loaders as objects. Note: loaders must be specified in reverse order.
+      // ie: for the loaders below the actual execution order would be:
+      // input file -> sass-loader -> postcss-loader -> css-loader -> style-loader/mini-css-extract-plugin
       {
-        loader: 'sass-loader',
-        useId: 'sass',
+        loader: 'postcss-loader',
         options: {
-          includePaths: ['absolute/path/a', 'absolute/path/b']
+          plugins: [require('autoprefixer')]
         }
       },
       {
-        loader: 'postcss-loader',
+        loader: 'sass-loader',
+        useId: 'sass',
         options: {
-          plugins: [require('autoprefixer')]
+          includePaths: ['absolute/path/a', 'absolute/path/b']
         }
       }
     ]

packages/style-loader/README.md

@@ -149,18 +149,20 @@ module.exports = {
     test: /\.(css|sass|scss)$/,
     moduleTest: /\.module\.(css|sass|scss)$/,
     loaders: [
-      // Define loaders as objects
+      // Define loaders as objects. Note: loaders must be specified in reverse order.
+      // ie: for the loaders below the actual execution order would be:
+      // input file -> sass-loader -> postcss-loader -> css-loader -> style-loader/mini-css-extract-plugin
       {
-        loader: 'sass-loader',
-        useId: 'sass',
+        loader: 'postcss-loader',
         options: {
-          includePaths: ['absolute/path/a', 'absolute/path/b']
+          plugins: [require('autoprefixer')]
         }
       },
       {
-        loader: 'postcss-loader',
+        loader: 'sass-loader',
+        useId: 'sass',
         options: {
-          plugins: [require('autoprefixer')]
+          includePaths: ['absolute/path/a', 'absolute/path/b']
         }
       }
     ]