乐趣区

关于css:TypeError-thisgetOptions-is-not-a-function

jiezi

一 背景

在 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
退出移动版