TypeError:这个。getOptions不是一个函数

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

TypeError:这个。getOptions不是一个函数

 @ ./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
316483 次浏览
小开

这为我解决了类似的问题萨斯:

  1. 添加到包中。"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所说的，在我的情况下，似乎sass-loader@11.0.0不能与vue@2.6.12一起工作。

我安装了sass-loader@10.1.1，它又像一个魅力。

在你的package.json中:

"sass-loader": "^10",
小开

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

如果使用yarn，你可以降级sass-loader。使用 Yarn add sass-loader@^10.1.1它工作。

小开

我有同样的问题解决降级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

小开

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

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

将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

小开

样式加载器v3也放弃了对Webpack 4的支持。

你的package.json条目应该看起来像这样:

"style-loader": "^2.0.0"

小开

跑yarn remove sass-loader

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

中的问题
小开

命令yarn add sass-loader安装版本11，这恰好与Webpack版本4及以下不兼容。当前Vue CLI V4使用Webpack V4。

你必须等到Vue CLI V5(将使用Webpack 5)发布(目前处于测试版)才能使用sass-loader v12。 或者，您可以更新到Webpack 5，但一定要阅读CHANGELOG.

小开

当使用Webpack版本4时，Vue CLI 4中的默认值。你需要确保你的加载器与它兼容。否则，您将得到关于相互冲突的对等依赖关系的错误。在这种情况下，您可以使用与Webpack 4兼容的旧版本的加载器。

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

还是不行?

删除文件夹node_modules

npm install

知道更多

小开

这里也一样。降级到以下版本会有所帮助:

"sass": "^1.38.0",
"sass-loader": "^10.2.0",
小开

我在css-loader v6中遇到了同样的问题。降级到v5似乎有用:

"css-loader": "^5.1.1"
小开

如果依赖包的版本与package.json中的不同，NPM会将依赖包下载到模块内部的模块中，但有时它会将最新版本或依赖包(我不知道为什么)下载到模块中…

例如，你可以在你的package.json中有sass-loader: 2.X，而一个模块XXXX在它的依赖包中也有sass-loader: *(你可以在XXXX模块的package.json中检查)。

npm会为你下载sass-loader 2.X，并为XXXX包下载sass-loader: 3.X——你会得到一个错误。

一个快速的修复方法是从XXXX/node_modules中删除额外的包。 你也可以检查XXXX模块使用的包版本，并尝试在你的项目中使用相同的版本

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

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

sass-loader: 3.0.0下载。

而npm根据项目下载了sass-loader: 2.0.0。Json在我的项目:

"style-loader": "2.0.0"

我删除了node_modules/font-awesome-sass-loader/node_modules/，它修复了这个问题。

小开

在我的情况下，我正在努力在CentOS 7上编译node-sass，我通过删除node-sass并添加萨斯来解决这个问题:

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

我们遇到了不同版本的问题，下面的组合是可行的:

文件: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",
}
]
}
}
小开

感谢对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
小开

我已经添加了这些行和我的代码工作正常，

.请尝试这样做，并添加或删除相应的软件包和版本 
  "dependencies": {
"core-js": "^3.6.5",
"node-sass": "^7.0.1",
"sass-resources-loader": "^2.1.0",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.13",
"@vue/cli-plugin-eslint": "~4.5.13",
"@vue/cli-service": "~4.5.13",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0",
"node-sass": "^4.14.1",
"prettier": "^1.19.1",
"sass-loader": "^10.0.2",
"vue-template-compiler": "^2.6.11"
},

提交答案