安装sass运行报错TypeError: this.getOptions is not a function

一问题：

       最近在做一个老项目的迭代，发现老项目都用的是css，过于繁琐，就下载了sass.但是运行就报Error: Module build failed: TypeError: this.getOptions is not a function的错

二排查：

在网上搜索，有文章说是解决less相关问题的说是“ less-loader版本太高了，安装低版本的就没问题啦，比如5.0.0。看当前安装的是less-loader@8.0.0,降级到less-loader@v5.0.0之后也确实好了。但是事情真的那么简单吗？为什么高版本不可以？为什么是5.0.0?

我去看之前跑的没有出问题的项目版本是v7.2.0，这个版本也没有问题，后来再仔细搜索发现是高版本的less-loader的配置变了。”所以我在想sass上应该是共通的。

之前的sass配置：

module.exports = {
    ...
    module: {
        rules: [{
            test: /.sass$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader", 
                options: {
                    strictMath: true,
                    noIeCompat: true
                }
            }]
        }]
    }
};

注意用的是options:{}。
但是在8版本，官方给出的是：

module.exports = {
 module: {
   rules: [
     {
       test: /.sass$/i,
       use: [
         {
           loader: "style-loader",
         },
         {
           loader: "css-loader",
         },
         {
           loader: "sass-loader",
           options: {
             sassOptions: {
               strictMath: true,
             },
           },
         },
       ],
     },
   ],
 },
};

注意这里的是options: {sassOptions:}}

 

三.解决：

根本解决

把之前的options稍加修改，加上sassOptions:

module.exports = {
    ...
    module: {
        rules: [{
            test: /.sass$/,
            use: [
               ...
               {
                loader: "sass-loader", 
                options: {
                    + sassOptions: {
                        strictMath: true,
                        noIeCompat: true
                    + }
                }
            }]
        }]
    }
};

 

快速解决

最简单的解决方法就是降低版本了，8的上一个版本是7.3.0，所以我们想在不改变配置的情况下解决问题，降级到7.3.0就OK：

 

npm install sass-loader@7.3.0 --save-dev