Сразу после установки Vue3 выскакивает ошибка с scss

Question

Сразу после установки Vue3 выскакивает ошибка с scss

Рейтинг: 0Ответов: 1Опубликовано: 20.06.2023

vue create apprtl
cd apprtl
yarn serve

И сходу ошибки:

ERROR Failed to compile with 1 error error in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss Syntax Error: TypeError: Cannot read properties of undefined (reading 'config')

Пробовал гуглить по этим ошибкам! Грузить в chatGPT! Переустанавливать с разными версиями node.js, менять npm/yarn. Только на "голове не танцевал" разве что!

Ну не должно быть так, чтоб сразу после установки сыпались ошибки! Да ещё и решений нет нигде! Может Vue вообще не работает в России?

App.vue:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';

@Options({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

<style scoped lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

package.json - пробовал устанавливать старую версию sass-loader

{
  "name": "apprtl",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "register-service-worker": "^1.7.2",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.32.7",
    "sass-loader": "10.1.1",
    "typescript": "~4.5.5"
  }
}

vue.js scss npm yarn

Источник: Stack Overflow на русском

Answer 1

▲ 2

Создание проекта с Vue 3 по инструкции:

Запустить проект командой:

npm run dev

Проект поднимается со следующими параметрами:

  VITE v4.3.9  ready in 606 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Проект поддерживает TS. В проект добавлен Vue Router, Pinia(работа со state). Установка выполнялась на Windows 11 Pro.

Версии node и npm:

node -v v16.19.0
npm -v 8.19.3

App.vue:

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
  /* Удалил для экономии места */
</style>

Выполните те же действия и у вас всё заработает.

Сразу после установки Vue3 выскакивает ошибка с scss

Ответы