add sass-resources-loader for scss in vue

`yarn add --dev sass-resources-loader`

Author: mimosafa

package.json

@@ -17,6 +17,7 @@
     "mini-css-extract-plugin": "^0.9.0",
     "sass": "^1.26.9",
     "sass-loader": "^8.0.2",
+    "sass-resources-loader": "^2.0.3",
     "vue-loader": "^15.*",
     "vue-template-compiler": "^2.6.11",
     "webpack": "^4.43.0",

src/app.vue

@@ -25,6 +25,6 @@
 
 <style lang="scss" scoped>
   .title {
-    color: red;
+    @include text-red
   }
 </style>

src/css/core/mixin/_mixin.scss

@@ -0,0 +1,3 @@
+@mixin text-red {
+  color: $_color-red;
+}

src/css/core/variable/_color.scss

@@ -0,0 +1 @@
+$_color-red : red;

src/index.scss

@@ -1,3 +1,9 @@
+// @import "css/core/variable/color"; // <- included @webpack.config.js
+
 body {
   background-color: #eee;
 }
+
+address {
+  color: $_color-red;
+}

webpack.config.js

@@ -31,6 +31,15 @@ module.exports = {
                 fiber: require('fibers')
               }
             }
+          },
+          {
+            loader: 'sass-resources-loader',
+            options: {
+              resources: [
+                path.resolve(__dirname, 'src/css/core/variable/_color.scss'),
+                path.resolve(__dirname, 'src/css/core/mixin/_mixin.scss')
+              ]
+            }
           }
         ]
       }