From 532e78dbad25fde1cc45c2954aae38c59cfc662d Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Thu, 26 Jul 2018 18:08:27 +0200 Subject: [PATCH 1/4] added sass loader added example of sass loader and explanation of why it goes at the end in order to work --- src/content/concepts/loaders.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/content/concepts/loaders.md b/src/content/concepts/loaders.md index 96f464250d6e..8875996406bf 100644 --- a/src/content/concepts/loaders.md +++ b/src/content/concepts/loaders.md @@ -52,7 +52,7 @@ There are three ways to use loaders in your application: ### Configuration [`module.rules`](/configuration/module/#module-rules) allows you to specify several loaders within your webpack configuration. -This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader: +This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader. Loaders work in a backwards order, from the last one to the first one. The sass loader will work first compiling your sass to css and then it will call the css loader and then the style loader. In order for the sass loader to work it needs to be at the end as sass will be the first thing that gets compiled. If you are not working with sass then you won't need the sass-loader. ```js-with-links-with-details module.exports = { @@ -67,7 +67,8 @@ module.exports = { options: { modules: true } - } + }, + { loader: ['sass-loader'](/loaders/sass-loader) } ] } ] From b3800aba8d669f2a76e66836c6d81919453dc15e Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Fri, 27 Jul 2018 15:25:34 +0200 Subject: [PATCH 2/4] update text for sass loaders updated the text and added the link to where the loader order is mentioned --- src/content/concepts/loaders.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/concepts/loaders.md b/src/content/concepts/loaders.md index 8875996406bf..117b576e5a97 100644 --- a/src/content/concepts/loaders.md +++ b/src/content/concepts/loaders.md @@ -52,7 +52,9 @@ There are three ways to use loaders in your application: ### Configuration [`module.rules`](/configuration/module/#module-rules) allows you to specify several loaders within your webpack configuration. -This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader. Loaders work in a backwards order, from the last one to the first one. The sass loader will work first compiling your sass to css and then it will call the css loader and then the style loader. In order for the sass loader to work it needs to be at the end as sass will be the first thing that gets compiled. If you are not working with sass then you won't need the sass-loader. +This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader. + +In the example below note the order of the sass-loader. See ["Loader Features"](/concepts/loaders/#loader-features) for more information on order of loaders. ```js-with-links-with-details module.exports = { From 199dfdcc77d2d14d4c1af848ed0dd31c5c226339 Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Fri, 27 Jul 2018 17:13:28 +0200 Subject: [PATCH 3/4] update loader order text update loader order text --- src/content/concepts/loaders.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/concepts/loaders.md b/src/content/concepts/loaders.md index 117b576e5a97..f1d0d00c39d8 100644 --- a/src/content/concepts/loaders.md +++ b/src/content/concepts/loaders.md @@ -54,7 +54,7 @@ There are three ways to use loaders in your application: [`module.rules`](/configuration/module/#module-rules) allows you to specify several loaders within your webpack configuration. This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader. -In the example below note the order of the sass-loader. See ["Loader Features"](/concepts/loaders/#loader-features) for more information on order of loaders. +In the example below note the order of the sass-loader. See ["Loader Features"](/concepts/loaders/#loader-features) for more information about loaders order. ```js-with-links-with-details module.exports = { From 98515a72b6a822af307a7f7a10f1e56a2f5c4d2e Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Sat, 28 Jul 2018 15:27:19 +0200 Subject: [PATCH 4/4] added more detail for sass loader text added more detail for sass loader text to describe a bit more about how the loaders are read from right to left --- src/content/concepts/loaders.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/concepts/loaders.md b/src/content/concepts/loaders.md index f1d0d00c39d8..b3aa5a74f813 100644 --- a/src/content/concepts/loaders.md +++ b/src/content/concepts/loaders.md @@ -54,7 +54,7 @@ There are three ways to use loaders in your application: [`module.rules`](/configuration/module/#module-rules) allows you to specify several loaders within your webpack configuration. This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader. -In the example below note the order of the sass-loader. See ["Loader Features"](/concepts/loaders/#loader-features) for more information about loaders order. +Loaders are evaluated/executed from right to left. In the example below execution starts with sass-loader, continues with css-loader and finally ends with style-loader. See ["Loader Features"](/concepts/loaders/#loader-features) for more information about loaders order. ```js-with-links-with-details module.exports = {