Ошибка Module build failed. Подскажите, пожалуйста, в чем причина проблем?

Ошибка которую возвращает Vue.js:

Compiled with problems:X

ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Expected ". ╷ 1 │ @import "@assets/stylesheets/styles.scss │ ^ ╵ src\App.vue 1:42 root stylesheet

ERROR in ./src/components/v-banner.vue?vue&type=style&index=0&id=cec70a1a&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/v-banner.vue?vue&type=style&index=0&id=cec70a1a&lang=scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Expected ". ╷ 1 │ @import "@assets/stylesheets/styles.scss │ ^ ╵ src\components\v-banner.vue 1:42 root stylesheet

ERROR in ./src/components/v-filter/v-filter.vue?vue&type=style&index=0&id=e73152a2&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/v-filter/v-filter.vue?vue&type=style&index=0&id=e73152a2&lang=scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Expected ". ╷ 1 │ @import "@assets/stylesheets/styles.scss │ ^ ╵ src\components\v-filter\v-filter.vue 1:42 root stylesheet

ERROR in ./src/components/v-header/v-header-user-list-item.vue?vue&type=style&index=0&id=7b85dc4e&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/v-header/v-header-user-list-item.vue?vue&type=style&index=0&id=7b85dc4e&lang=scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Expected ". ╷ 1 │ @import "@assets/stylesheets/styles.scss │ ^ ╵ src\components\v-header\v-header-user-list-item.vue 1:42 root stylesheet

ERROR in ./src/components/v-header/v-header-user-list.vue?vue&type=style&index=0&id=742803e2&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/v-header/v-header-user-list.vue?vue&type=style&index=0&id=742803e2&lang=scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Expected ". ╷ 1 │ @import "@assets/stylesheets/styles.scss │ ^ ╵ src\components\v-header\v-header-user-list.vue 1:42 root stylesheet

ERROR in ./src/components/v-header/v-header-user.vue?vue&type=style&index=0&id=573c02b9&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/v-header/v-header-user.vue?vue&type=style&index=0&id=573c02b9&lang=scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Expected ". ╷ 1 │ @import "@assets/stylesheets/styles.scss │ ^ ╵ src\components\v-header\v-header-user.vue 1:42 root stylesheet

ERROR in ./src/components/v-header/v-header.vue?vue&type=style&index=0&id=577aae4f&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/v-header/v-header.vue?vue&type=style&index=0&id=577aae4f&lang=scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Expected ". ╷ 1 │ @import "@assets/stylesheets/styles.scss │ ^ ╵ src\components\v-header\v-header.vue 1:42 root stylesheet

ERROR in ./src/components/v-index/v-index.vue?vue&type=style&index=0&id=50023bf2&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/v-index/v-index.vue?vue&type=style&index=0&id=50023bf2&lang=scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Expected ". ╷ 1 │ @import "@assets/stylesheets/styles.scss │ ^ ╵ src\components\v-index\v-index.vue 1:42 root stylesheet

ERROR in ./src/assets/stylesheets/styles.scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/stylesheets/styles.scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Expected ". ╷ 1 │ @import "@assets/stylesheets/styles.scss │ ^ ╵ src\assets\stylesheets\styles.scss 1:42 root stylesheet

Ошибка которую указывает console: app.js:378 Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Expected ". ╷ 1 │ @import "@assets/stylesheets/styles.scss │ ^ ╵ src\components\v-header\v-header-user-list-item.vue 1:42 root stylesheet at ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/v-header/v-header-user-list-item.vue?vue&type=style&index=0&id=7b85dc4e&lang=scss (app.js:378:7) at webpack_require (app.js:1291:33) at fn (app.js:1525:21) at eval (v-header-user-list-item.vue?15ee:4:1) at ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/v-header/v-header-user-list-item.vue?vue&type=style&index=0&id=7b85dc4e&lang=scss (app.js:1168:1) at webpack_require (app.js:1291:33) at fn (app.js:1525:21) at ./src/components/v-header/v-header-user-list-item.vue?vue&type=style&index=0&id=7b85dc4e&lang=scss (app.js:1015:477) at webpack_require (app.js:1291:33) at fn (app.js:1525:21)

package.json:

 "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "node-sass": "^7.0.1",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.54.0",
    "sass-loader": "^13.0.2",
    "webpack": "^5.73.0"
  },

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import "./assets/stylesheets/styles.scss"
import components from '@/components/UI'

const app = createApp(App)

components.forEach(component => {
    app.component(component.name, component)
})

app.mount('#app')

vue.config.js:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: ' @import "@assets/stylesheets/styles.scss'
      }
    }
  }
}

App.vue:

<template>
  <div class="app">
    <v-header />
    <v-banner />
    <div class="wrapper">
      <v-index />
    </div>
  </div>
</template>

<script>

import VHeader from "@/components/v-header/v-header";
import VBanner from "@/components/v-banner";
import VIndex from "@/components/v-index/v-index";
export default {
  name: 'App',
  components: {VIndex, VBanner, VHeader}
}
</script>

<style lang="scss">
.app {
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
}

.wrapper {
  padding: 0 112px;
  height: 1000px;
}
</style>