vue this.getOptions is not a function at Object.lessLoader

Posted 2021-06-16 zq_Hero

一 背景

在vue2项目上使用less,安装了 less 和 less-laoder之后，编译项目的时候提示下面问题：

Module build failed (from ./node_modules/less-loader/dist/cjs.js): TypeError: this.getOptions is not a function

Module build failed: TypeError: this.getOptions is not a function at Object.lessLoader

二 排查问题

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

我去看之前跑的没有出问题的项目版本是v7.2.0，这个版本也没有问题，后来再仔细搜索发现是高版本的less-loader的配置变了。
之前使用less-loader 建议配置:

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

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

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

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

之前我们使用~来解决路径引用问题，现在8版本解决掉了这个bug,可以不再依赖～了，随之带来的是配置文件字段发生了改变。

三 解决问题

好了，既然已经知道是8版本配置发生了变化，那就好解决了。
根本解决

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

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

vue-cli

如果你是使用vue-cli创建的项目，可以在vue.config.js上自定义less-loader配置：

chainWebpack: config => {
 config.module
 .rule('less')
 .use('less-loader')
 .loader('less-loader')
 .options({
    lessOptions: {
    /**less-loader 配置 */
      strictMath: true,
      noIeCompat: true
    }
 })

快速解决

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

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