From 5fefb9d7201722bcb24d5510de6e86caa06ce6b0 Mon Sep 17 00:00:00 2001
From: Lucas Moreira <lucas@moreiradevelopment.io>
Date: Wed, 30 Jan 2019 11:15:34 -0500
Subject: [PATCH] Updated documentation regarding Preprocessors - Added Webpack
 guide for utilizing centra Variables in SCSS

---
 docs/guide/pre-processors.md | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/docs/guide/pre-processors.md b/docs/guide/pre-processors.md
index 737b9df14..5a0ebe62a 100644
--- a/docs/guide/pre-processors.md
+++ b/docs/guide/pre-processors.md
@@ -91,6 +91,36 @@ Note that `sass-loader` processes the non-indent-based `scss` syntax by default.
 }
 ```
 
+### Sharing Variables & Mixins via single import
+`sass-resources-loader` in conjunction with `mini-css-extract-plugin` can be used to share variables and mixins across the Vue.js project without having to call an `import` for each component.
+
+```js
+// Require MiniCssExtractPlugin
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module: {
+  rules: [
+    // CSS & SCSS Processing
+    {
+      test: /\.(sa|sc|c)ss$/,
+      use: [
+        MiniCssExtractPlugin.loader,
+        'css-loader',
+        'postcss-loader',
+        'sass-loader',
+        {
+          loader: 'sass-resources-loader',
+          options: {
+            // Load common SCSS [ Vars & Mixins ]
+            resources: './path/to/shared/variables.scss',
+          },
+        }
+      ],
+    },
+  ]
+},
+```
+
 ## LESS
 
 ``` bash