TypeError: this.getOptions is not a function 报错：react中使用webpack，却无法对less文件打包

使用react写前端，需要用webpack做一个打包。之前都是正常运行的，现在加入了less文件就失败了。可以确定问题就在less文件上。下面介绍如何正确加入less文件，并对我发生的错误进行解析。

webpack4 处理less文件 - 不骄不傲 - 博客园

这篇博客中提到的步骤很有帮助，但是一些细节需要额外注意，否则会引发下属错误，因此在此摘录：

1. 安装相关依赖
npm i style-loader css-loader less-loader less -D

注意：此处直接安装极易引发下属图片的错误，原因是less最新版8.0.0似乎有重大更新，使用逻辑与之前不同，一定要解决的话 可以参考vue 2 项目中使用less-loader 出现 TypeError: this.getOptions is not a function 错误_乐观的猴子的博客-CSDN博客，虽然我觉得没必要。

ERROR in ./src/style.less
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/pro-mern-stack-2/ui/node_modules/style-loader/dist/index.js:19:24)

那么正确的方式是：指定对应的安装版本，虽然我不确定最合适的范围，不过可以参考我的成功的版本：

    "css-loader": "^2.0.2",

    "less": "^3.9.0",

    "less-loader": "^7.3.0",

    "style-loader": "^0.23.1",

    "webpack": "^4.28.3",

    "webpack-cli": "^3.2.1"

注意，和一些博客上所强调的不同，不仅仅是less-loader版本不能过高，css-loader和style-loader版本也得相应降低。降低前，我的代码仍然不成功，降低后才跑通。

2. 配置webpack文件

module: {
        rules: [
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            }
        ]
    }

这是链接给的方式，没错。我补充一下，这个可以和其他rules拼接到一起，如下图所示：

3. 当然，需要在使用的jsx文件开头引入，形如：

import './css/index.less'

4. 一个很多博客没写，但是依然值得提及的点：less文件到底放到哪里？

答案是，可以放到jsx同一个文件夹目录下。

 

这是我的文件目录架构，webpack将一众jsx打包，放到app.bundle.js中。可见，打包后的app.bundle.js是在另一个文件夹。这里不用担心，具体调用style.less的文件IssueFilter.jsx正常调用为'./style.less'，然后上面的app.bundle.js能够找到正确的less文件。