From 4e9a29e47ae776064b5afe931a347d61a4390451 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Fri, 18 Sep 2020 14:53:44 +0300
Subject: [PATCH] Update webpack.md

Format snippets
---
 .../docs/5.0/getting-started/webpack.md       | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/site/content/docs/5.0/getting-started/webpack.md b/site/content/docs/5.0/getting-started/webpack.md
index 693f961092..89870a684b 100644
--- a/site/content/docs/5.0/getting-started/webpack.md
+++ b/site/content/docs/5.0/getting-started/webpack.md
@@ -45,18 +45,24 @@ First, create your own `_custom.scss` and use it to override the [built-in custo
 For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/webpack-contrib/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack). With minimal setup, your webpack config should include this rule or similar:
 
 {{< highlight js >}}
-...
+// ...
 {
   test: /\.(scss)$/,
   use: [{
-    loader: 'style-loader', // inject CSS to page
+    // inject CSS to page
+    loader: 'style-loader'
   }, {
-    loader: 'css-loader', // translates CSS into CommonJS modules
+    // translates CSS into CommonJS modules
+    loader: 'css-loader'
   }, {
-    loader: 'postcss-loader', // Run postcss actions
+    // Run postcss actions
+    loader: 'postcss-loader',
     options: {
+      // `postcssOptions` is needed for postcss 8.x;
+      // if you use postcss 7.x skip the key
       postcssOptions: {
-        plugins: function () { // post css plugins, can be exported to postcss.config.js
+        // postcss plugins, can be exported to postcss.config.js
+        plugins: function () {
           return [
             require('autoprefixer')
           ];
@@ -64,10 +70,11 @@ For Bootstrap to compile, make sure you install and use the required loaders: [s
       }
     }
   }, {
-    loader: 'sass-loader' // compiles Sass to CSS
+    // compiles Sass to CSS
+    loader: 'sass-loader'
   }]
-},
-...
+}
+// ...
 {{< /highlight >}}
 
 ### Importing Compiled CSS
@@ -81,14 +88,17 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 In this case you may use your existing rule for `css` without any special modifications to webpack config, except you don't need `sass-loader` just [style-loader](https://github.com/webpack-contrib/style-loader) and [css-loader](https://github.com/webpack-contrib/css-loader).
 
 {{< highlight js >}}
-...
+// ...
 module: {
   rules: [
     {
       test: /\.css$/,
-      use: ['style-loader', 'css-loader']
+      use: [
+        'style-loader',
+        'css-loader'
+      ]
     }
   ]
 }
-...
+// ...
 {{< /highlight >}}