scss 不适用于 vue3 应用程序（类型错误：this.getOptions 不是函数）

Question

我正在尝试在 vue3 应用程序中使用 scss。我收到以下错误。

./src/components/SinglePost.vue?vue&type=style&index=0&id=164ef990&lang=scss (./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/components/SinglePost.vue?vue&type=style&index=0&id=164ef990&lang=scss) 模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）： TypeError: this.getOptions 不是Object.loader 中的函数 (/usr/src/app/node_modules/sass-loader/dist/index.js:25:24)

我已按照https://vue-loader.vuejs.org/guide/pre-processors.html页面上给出的说明进行操作。我用来vue-cli-service serve启动服务器。singlepost.vue 中的代码如下，我不确定如果使用此命令启动服务是否需要创建 webpack.config.js 文件。

<style lang="scss">
.btn {
    &,
    &:link,
    &:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.5rem 4rem;
    display: inline-block;
    border-radius: 10rem;
    transition: all .3s;
    position: relative;
    //  
    }
.....etc etc 
</style>

请指导我，我是网络开发的新手。

Answer 1

或者运行

npm install -D sass-loader@10.1.1 sass