vue2.0配置sass

vue中配置sass遇到了一些问题，经过反复测试发现是版本问题

我的项目创建用的是vue官网上的方式,创建的是vue2.0版本的项目
之后我通过执行yarn add sass-loader和yarn add node-sass安装插件，安装的版本都是默认版本，可能是最新版本

"dependencies": {
    "core-js": "^3.6.5",
    "node-sass": "^6.0.1",
    "sass-loader": "^12.1.0",
    "vue": "^2.6.11"
}

之后在vue文件中样式加入scss,并使用scss语法写样式

<style scoped lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  a{
    color: red;
  }
}
</style>

报如下错误

本人愚钝在报错内容中未发现具体是什么错误，该怎么解决，后来在网上搜索解决办法，加上不断尝试最后发现是版本问题
执行 yarn add node-sass@4.12.0和yarn add sass-loader@7.1.0

"dependencies": {
    "core-js": "^3.6.5",
    "node-sass": "4.12.0",
    "sass-loader": "7.1.0",
    "vue": "^2.6.11"
}

重新启动项目，scss就好用了，不知道有没有更好地方式解决这个问题