vue2项目，用dart-sass替换node-sass报错

一、原项目package.json的sass信息部分:

  "node-sass": "^4.12.0",
  "sass-loader": "^8.0.2",

二、用dart-sass替换node-sass

移除原项目的node-sass模块，并用dart-sass替代；命令如下：

yarn remove node-sass 
yarn add sass-loader sass -D 

此时的package.json关于sass的信息 如下：

 "sass": "^1.32.8",
 "sass-loader": "^11.0.1",

启动项目，报错如下：
error in .vue?vue&type=style&index=0&lang=scss& Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function
我在项目中并未用到它报错的getOptions 方法。

三、 解决办法

将sass-loader降级为原项目的版本，成功。

yarn add sass-loader@8.0.2

 "sass": "^1.32.8",
 "sass-loader": "^8.0.2",

参考：https://stackoverflow.com/questions/58546521/node-sass-and-sass-loader-module-build-failed-typeerror-this-getresolve-is-n

四、配置sass全局变量

vue.config.js

module.exports={
    
    
	 css: {
    
    
    loaderOptions: {
    
    
      // variable.scss 文件放在src/assets/style/variable.scss ,里面是一些要用到的全局变量，
      sass: {
    
    
        prependData: `@import "@/assets/style/variable.scss" ;`
      }
    }
  }
}
/*
variable.scss的内容如下：
$icon_color: #5d7eb2;
$border_color: #ebeef5;
$header_bg: #409eff;
$title_bg: #f5f5f5;
它配置好以后，即可在任意组件中写sass的地方用了,如：
<style lang="scss">
  .my__icon {
    color: $icon_color;
    font-size: 18px;
  }
</style>
*/