add[]: add global scss

Author: bujidao

build/utils.js

@@ -60,7 +60,13 @@ exports.cssLoaders = function (options) {
     postcss: generateLoaders(),
     less: generateLoaders('less'),
     sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
+    scss: generateLoaders('sass').concat(
+      {
+      loader: 'sass-resources-loader',
+      options: {
+        resources: path.resolve(__dirname, '../src/styles/_variables.scss')
+      }
+    }),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
   }

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "js-cookie": "^2.2.0",
+    "sass-resources-loader": "^2.1.0",
     "svg-sprite-loader": "^4.1.6",
     "vue": "^2.5.2",
     "vue-i18n": "^8.12.0",

src/layout/index.vue

@@ -37,6 +37,6 @@ export default {
 
 <style lang="scss" scoped>
   .app-container {
-    /* background: red; */
+    background: $skyBlue;
   }
 </style>

src/styles/_variables.scss

@@ -0,0 +1 @@
+$skyBlue: #eee;

src/styles/index.scss

@@ -1,4 +1,4 @@
 html, body {
   margin: 0;
   padding: 0;
-}
+}