vue2中使用sass并配置全局的sass样式变量的方法

 "sass-loader": "^6.0.7",
 "sass-resources-loader": "^1.3.3",

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
   }

 function resolveResouce(name) {
  return path.resolve(__dirname, '../src/common/sass/' + name);
 }
 function generateSassResourceLoader() {
  var loaders = [
   cssLoader,
   'postcss-loader',
   'sass-loader',
   {
    loader: 'sass-resources-loader',
    options: {
     //这是用到的sass文件，多个文件时用数组的形式传入，这是带有变量和mixin的scss文件
     resources: [resolveResouce('variable.scss'), resolveResouce('mixin.scss')] 注意这是我全局样式的位置，个人不同，需做调整
    }
   }
  ];
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

 return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  //sass: generateLoaders('sass', { indentedSyntax: true }),
  //scss: generateLoaders('sass'),
  sass: generateSassResourceLoader(),
  scss: generateLoaders('sass')
   .concat(
    {
     loader: 'sass-resources-loader',
     options: {
      resources: path.resolve(__dirname, '../src/common/sass/index.scss') //注意这是我全局样式的位置，个人不同，需做调整
     }
    }
   ),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }