关于css:TypeError-thisgetOptions-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。看了下我以后装置的是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 版本有一次大的降级：

之前咱们应用~来解决门路援用问题，当初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