类型错误：this.getOptions 不是一个函数。

Question

我在安装 Bootstrap 时遇到了一个奇怪的错误。错误信息如下：Syntax Error: TypeError: this.getOptions is not a function。我尝试卸载 less-loader 并安装 less-loader@5.0.0，因为我在网上看到这个建议，但是没有任何效果。我不确定该怎么做。

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss 4:14-419 14:3-18:5 15:22-427
 @ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.182:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

- Juliette

---

如果您能添加需要执行的步骤以重现问题，那就太好了。 - Sabito stands with Ukraine

Answer 1

与@KostDM所说的类似，在我的情况下，sass-loader@11.0.0似乎无法与vue@2.6.12一起使用。

我安装了sass-loader@10.1.1，它又像以前一样完美地工作了。

在您的package.json文件中：

"sass-loader": "^10",

- D_Pain

---

v11版本不支持Vue，因为v11需要Webpack v5 -> https://github.com/webpack-contrib/sass-loader/releases/tag/v11.0.0 - TitanFighter

对我来说仍然没有起作用，我正在使用Vue 3。 - Sai Teja T

尝试将 package.json 中的 sass-loader 版本改为 10.1.1 并运行 npm install，然后重新启动服务器。对我有用。 - ahjashish

Stack Overflow 上最被复制的回答（无代码） - Peter Mortensen

你可以像这里所说的那样：https://dev59.com/ylEG5IYBdhLWcg3wN29K，如果你正在使用新版本的vue，可以删除node-sass并安装sass。非常好用。 - Fausto T. Toloi

Answer 2

我曾经遇到同样的问题，通过降级sass-loader到10.1.1版本解决了问题。我使用的是@vue/cli 4.5.8，其中包含webpack@4.46.0。

从sass-loader v11.0.0和less-loader v8.0.0版本开始，需要使用至少webpack 5版本。

最低支持的webpack版本是5

• sass-loader v11.0.0发布说明
• less-loader v8.0.0发布说明

- itacode

---

谢谢您的提示，帮助我解决了与Storybook和Next.js相关的问题。 - natterstefan

这个答案是D_Pain所接受的答案的重复。 - phil294

你能在Vue2中使用Webpack 5吗？ - Mathijs

@Mathijs 是的，你可以使用官方 vue-cli 版本 5 来搭建一个项目，它使用 webpack 5。或者像 vue-webpack-starter 这样的其他工具也可以。 - itacode

Answer 3

将 sass-loader 降级到 ^10.0.0 对我起了作用，但在一个新的 Nuxt.js CLI 应用程序中，我还需要安装 Sass。

npm i sass

要降级，您可以删除node_modules文件夹，要添加，请在终端中运行以下命令：

npm i sass-loader@10 

这将安装最新的10版本的sass-loader。

最后，再次安装所有依赖项：

npm i

Sass-loader 版本高于10需要使用 webpack 5。

- Freestyle09

---

我只需要删除sas-loader文件夹，然后运行npm i sass-loader@10。 - Kazu

这个答案是D_Pain所接受的答案的重复。 - phil294

你看到 D_Pain 的回答中提到了 nuxt 和 sass 包吗？真的吗？ - Freestyle09

Answer 4

对我来说，降级postcss-loader有所帮助

+ "postcss-loader": "^4.2.0",
- "postcss-loader": "^5.0.0",

- Daniel Ehrhardt

---

同样在这里，也使用了sass-loader。 - Tidris

Answer 5

昨天我在将sass-loader升级到最新版本后发现了一个问题。

如果使用yarn，您可以将sass-loader降级。使用yarn add sass-loader@^10.1.1就可以解决问题。

- Nuttapong Sarkana

---

在我的Rails 6.0.1应用程序中解决了我的问题。我在这里添加我的评论，因为控制台语法是您在最近的Rails应用程序中“通常”使用的语法。谢谢@D_Pain。顺便说一句，我没有使用Vue，但我必须升级了节点模块并引起了问题。主要是Bootstrap没有起作用。 - Greg

这个答案是D_Pain所接受的答案的重复。 - phil294

Answer 6

style-loader v3版本不再支持Webpack 4。

你的package.json条目应如下所示:

"style-loader": "^2.0.0"

- divslinger

Answer 7

我在这里使用css-loader v6时遇到了同样的问题。降级到v5似乎可以解决：

"css-loader": "^5.1.1"

- DrunkOldDog

Answer 8

对于类似Sass的问题，这是我的解决方法：

1. 在devDependencies中的package.json中添加："sass-loader": "7.3.1",
2. npm i -D sass 或者 yarn add sass --dev
3. 删除node_modules
4. npm install 或者 yarn，具体取决于您的包管理器

我的配置如下：

  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.32.6",
    "sass-loader": "7.3.1",
    "vue-template-compiler": "^2.6.11"
  },

- KostDM

---

你可以用 yarn 代替 npm install && yarn install。 - charles-allen

npm install 不够吗？ - ijt

这个答案是D_Pain所接受的答案的副本。 - phil294

Answer 9

运行yarn remove sass-loader

然后安装特定版本10，使用命令yarn add sass-loader@10。 这完全解决了"vue": "~2.6.12"的问题。

- Jet Ezra

---

这个答案是D_Pain所接受的答案的重复。 - phil294

是的，没错。但在大多数情况下，人们会因版本更改而感到困惑，这就是为什么我想清楚地显示接受答案的版本非常正确的原因。 - Jet Ezra

Answer 10

我们遇到了不同版本的问题，以下组合可以解决：

文件：package.json

{
    "devDependencies": {

        "webpack": "^4.46.0",
        "css-loader": "^5.1.1",

        "babel-loader": "8.1.0",
        "file-loader": "^6.1.0",
        "json-loader": "^0.5.7",
        "postcss-loader": "^6.2.1",
        "raw-loader": "^4.0.1",
        "sass-loader": "^12.6.0",
        "source-map-loader": "^3.0.1",
        "style-loader": "^3.3.1",
        "svg-url-loader": "^6.0.0",
        "ts-loader": "^5.3.3",
        "url-loader": "^4.1.1"
    }
}

文件：webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: "css-loader",
            }
        ]
    }
}

- Manohar Reddy Poreddy