TypeError: this.getOptions is not a function

一 背景

在vue2项目上使用less,安装了 less 和 less-laoder之后,编译项目的时候提示下面问题:
Module build failed (from ./node_modules/less-loader/dist/cjs.js): TypeError: this.getOptions is not a function

二 排查问题

在网上搜索,有文章说是less-loader版本太高了,安装低版本的就没问题啦,比如5.0.0。看了下我当前安装的是[email protected],降级到[email protected]之后也确实好了。但是事情真的那么简单吗?为什么高版本不可以?为什么是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 版本有一次大的升级:
image.png

之前我们使用~来解决路径引用问题,现在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 [email protected] --save-dev

你可能感兴趣的:(TypeError: this.getOptions is not a function)