问题:类型错误:this.getOptions 不是样式加载器的函数

问题

在使用 Storybook 时,我正在运行npm run storybook并收到以下错误。

ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function

背景/上下文

我的目标是让 Storybook 能够与sass一起使用。

设置很简单:我有scss由组件文件导入的文件。

在寻找实现这一点的方法时,我遇到了一个能够这样做的插件,请参阅这个。本质上,您可以运行npm i --save-dev @storybook/preset-scss style-loader css-loader sass-loader。

在这样做时,我遇到了我的第一个错误。这是同样的错误,但对于sass-loader。这个Stack Overflow 线程帮助我修复了这个错误。

所以,我想总而言之,我尝试过:

• 跟随文档(上面链接)

• 跟随堆栈溢出线程(上面链接)

相关的开发依赖

"@storybook/preset-scss": "^1.0.3",
"css-loader": "^6.2.0",
"sass-loader": "^10.1.1",
"style-loader": "^3.2.1"

提前谢谢!

解答

解决方案

退后一步后,我意识到我可以尝试解决sass-loader问题的方法:降级主要版本。

脚步

• 降级style-loader1 大版本到2.0.0:npm i style-loader@2.0.0

• 然后,幸运的是,我遇到了与css-loader相同的问题

• 降级css-loader1 大版本到5.2.7:npm i css-loader@5.2.7

概括

通过将所有加载程序降级为一个主要版本,我能够让它工作。