解决设置好scss全局变量设置后报错问题

 场景，在index.scss中设置后全局变量，引用到app.vue中保存后，运行报错，解决办法如下：

进入vue.config.js中修改如下：

module.exports= {
  devServer:{
    port:8088,
    host:'localhost',
    open:true
  },
  css:{
    loaderOptions:{
      sass:{
        data:`@import "@/styles/index.scss";`
      }
    }
  }
}

修改后保存，然后关闭命令行窗口，ctrl+c快捷键即可关闭，然后npm run serve重启，就可以正常调用Index.scss中的全局变量了

使用场景如下：

app.vue

<template>
  <div id="app">
    <div>
      <p>hello world</p>
      <div class="d1">
        <p>div1</p>
      </div>
    </div>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<style lang="scss">//scoped表示私有的隔离的
$lightColor:#ffffff;
$darkColor:#000000;
$redColor:#f00;
$blueColor:blue;

// #app div p {
//   color:$redColor;
// }
// #app div .d1 {
//   border:1px solid $blueColor;
// }

#app {
  div {
    p {
      color:$redColor;
    }
    .d1 {
      border:1px solid $blueColor;
      p {
        color:$orangeColor;//引用的scss中的变量
      }
    }
  }
}
</style>

scss文件：

$greenColor:green;
$orangeColor:orange;