TypeError: this.getOptions is not a function

Question

我在安装 Bootstrap 时遇到了一个奇怪的错误。错误如下。我尝试卸载less-loader并安装less-loader@5.0.0，因为我在网上看到它，但没有任何作用。我不确定在这一步要做什么。

Syntax Error: TypeError: this.getOptions is not a function

 @ ./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

Answer 1

这为我解决了，与 Sass:

类似的问题

添加到 package.json 中的 devDependencies: "sass-loader": "7.3.1",
npm i -D sass 或 yarn add sass --dev
移除node_modules
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"
  },

Answer 2

与@KostDM 所说的类似，在我的情况下，sass-loader@11.0.0 似乎不适用于 vue@2.6.12。

我安装了 sass-loader@10.1.1，它再次发挥了作用。

在你的package.json中：

"sass-loader": "^10",

Answer 3

昨天升级sass-loader到最新版本后发现问题

如果使用yarn，可以降级sass-loader。采用 yarn 添加 sass-loader@^10.1.1 它有效。

Answer 4

通过将 sass-loader 降级到 10.1.1，我遇到了同样的问题已解决。我正在使用包含 webpack@4.46.0.

的@vue/cli 4.5.8

从 sass-loader v11.0.0 和 less-loader v8.0.0 开始，

minimum supported webpack version is 5

Answer 5

对我来说，它有助于降级 postcss-loader

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

Answer 6

将 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

Answer 7

style-loader v3 也放弃了对 Webpack 4 的支持。

您的 package.json 条目应如下所示：

"style-loader": "^2.0.0"

Answer 8

运行 yarn remove sass-loader

然后专门安装版本 10 作为 yarn add sass-loader@10。这完全解决了 "vue": "~2.6.12",

中的问题

Answer 9

命令yarn add sass-loader安装的是版本11，正好不兼容Webpack 4及以下版本。当前的 Vue CLI V4 使用 Webpack v4.

您必须等到 Vue CLI V5（将使用 Webpack 5）发布（目前处于 Beta 阶段）才能使用 sass-loader v12。或者，您可以更新到 Webpack 5，但请务必阅读 CHANGELOG。

Answer 10

使用 Webpack 版本 4 时，这是 Vue CLI 4 中的默认版本。您需要确保您的加载器与其兼容。否则，您将收到有关冲突的对等依赖项的错误。在这种情况下，您可以使用仍然与 Webpack 4 兼容的旧版本加载器。

# Sass
npm install -D sass-loader@^10 sass

还是不行？

删除文件夹node_modules

npm install

Know more

Answer 11

这里也一样。降级到以下版本有帮助： "sass": "^1.38.0", "sass-装载机": "^10.2.0",

Answer 12

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

"css-loader": "^5.1.1"

Answer 13

NPM 将依赖包下载到模块内的模块，如果它们的版本与您的 package.json 不同，但有时它会将最新版本的 od 依赖包（不知道为什么）下载到模块中..

例如，您可以在 package.json 中包含 sass-loader: 2.X，而模块 XXXX 在其依赖包中也包含 sass-loader: *（你 cn 在那个 XXXX 模块中的 package.json 中检查） npm 将为您下载 sass-loader 2.X，并为 XXXX 包下载 sass-loader: 3.X - 您会收到错误消息。

快速修复是从 XXXX/node_modules 中删除该附加包您还可以检查 XXXX 模块使用的包版本，并尝试在您的项目中使用相同的版本。

在我的例子中 font-awesome-sass-loader@2.0.1 with project.json:

  "dependencies": {
    "css-loader": "*",
    "sass-loader": "*",
    "style-loader": "*"
  },

已下载 sass-loader: 3.0.0

while npm downloaded sass-loader: 2.0.0 根据 project.json 在我的项目中：

"style-loader": "2.0.0"

我删除了 node_modules/font-awesome-sass-loader/node_modules/ 并解决了问题。

Answer 14

在我的例子中，我正在努力在 Centos7 上编译 node-sass，我解决了删除 node-sass 并改为放置 sass 的问题。

npm uninstall node-sass
npm install sass
npm install sass-loader^8

Answer 15

不同版本的问题，以下组合有效：

文件：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",
            }
        ]
    }
}

Answer 16

感谢@itacode，我们只需要做：

-D 仅表示开发环境，您可以为所有环境删除它

纱线：

# yarn add @vue/cli@^4
yarn add -D sass
yarn add -D less
yarn add -D sass-loader@^10
yarn add -D less-loader@^7

或 npm:

# npm i @vue/cli@^4
npm i -D sass
npm i -D less
npm i -D sass-loader@^10
npm i -D less-loader@^7

TypeError: this.getOptions is not a function

TypeError: this.getOptions is not a function

vue.js

webpack

sass-loader