webpack 类型错误:此.getOptions不是样式加载器的函数

yr9zkbsy  于 2022-11-13  发布在  Webpack
关注(0)|答案(5)|浏览(203)

问题

在使用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文件,由组件文件导入。
在寻找实现这一点的方法时,我偶然发现了一个能够做到这一点的 addon,请参见this
在这样做的过程中,我遇到了我的第一个错误。这是同样的错误,但对于sass-loaderThis堆栈溢出线程帮助我修复了那个错误。
所以,我想总结一下,我试过:

  • 随附文档(以上链接)
  • 以下沿着堆栈溢出线程(上面链接)
    相关的开发依赖项
"@storybook/preset-scss": "^1.0.3",
"css-loader": "^6.2.0",
"sass-loader": "^10.1.1",
"style-loader": "^3.2.1"

提前感谢!

e3bfsja2

e3bfsja21#

解决方案

后退一步之后,我意识到我可以尝试我所做的来修复sass-loader问题:正在降级主要版本

步骤

  • 已将style-loader 1主要版本降级为2.0.0npm i style-loader@2.0.0
  • 然后,很幸运,我在使用css-loader时遇到了同样的问题
  • 已将css-loader 1主要版本降级为5.2.7npm i css-loader@5.2.7
    摘要

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

nfs0ujit

nfs0ujit2#

我在StoryBook中设置Sass时也遇到了这个问题。自述文件提供的Yarn脚本将安装那些库的最新版本,这些库不再与StoryBook运行的Webpack 4兼容。
对于其他任何人遇到这个问题的故事书,这是你可以运行代替。

yarn add -D @storybook/preset-scss css-loader@5.2.6 sass sass-loader@10.1.1 style-loader@2.0.0
bnl4lu3b

bnl4lu3b3#

降级后,在我的情况下,我解决了它只是评论加载器scss和sass:

{
                test: /\.css$/,
                use:
                    [
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                modules: true
                            }
                        }
                        // ,
                        // {
                        //     loader: 'sass-loader'
                        // }
                        // ,
                        // {
                        //     loader: 'scss-loader'
                        // }
                    ]
            }

声明模块“*. module.css”;不影响结果。

记住:始终运行

npm start

来测试这些配置更改,看看是否会发生一些事情**。这样做可以保存我今天下午的时间。

jw5wzhpr

jw5wzhpr4#

旧版Webpack不支持最新版本的CSS加载器:

yarn add -D @storybook/preset-scss css-loader@5.2.6 sass sass-loader@10.1.1 style-loader@2.0.0

这对我很有效。

odopli94

odopli945#

我没有使用Storybooks,只是使用TS的Webpack。我所要做的就是运行命令:
yarn add -D css-loader@5.2.6 style-loader@2.0.0
然后,我从我的webpack配置中删除了scss/sass加载程序,并将其设置为:

{
        test: /\.(css)$/,
        loaders: ['style-loader', 'css-loader'],
      },

希望这对大家有帮助。

相关问题