Не работает vue3 и переменные scss

Question

В глобальном файле VUE3 проекта прописываю SCSS переменную.

Далее в одном из модулей пытаюсь ее использовать:

Получаю ошибку.

98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                                                                                  17:57:46

 error  in ./src/components/headerNav.vue?vue&type=style&index=0&id=14455714&lang=scss&scoped=true

Syntax Error: SassError: Undefined variable.
  ╷
6 │   background-color: $--color-second;
  │                     ^^^^^^^^^^^^^^^
  ╵
  E:\Progi3\vue3-perfect-goods\src\components\headerNav.vue 6:21  root stylesheet


 @ ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader
/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/
headerNav.vue?vue&type=style&index=0&id=14455714&lang=scss&scoped=true 4:14-455 15:3-20:5 16:22-463
 @ ./src/components/headerNav.vue?vue&type=style&index=0&id=14455714&lang=scss&scoped=true
 @ ./src/components/headerNav.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--15-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--15-2!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-l
oader-v16/dist??ref--1-1!./src/views/Home.vue?vue&type=script&lang=ts
 @ ./src/views/Home.vue?vue&type=script&lang=ts
 @ ./src/views/Home.vue
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.0.102:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

Вопрос:
Почему это происходит и как необходимо реализовать задачу в разрезе данного стека технологий?

P.S. Сам редактор при этом подхватывает цвет переменной корректно:

Answer 1

У вас наверняка ошибка из-за атрибута scoped в тэге style, где вы задали переменные. Но, в любом случае, вам стоит вынести их в отдельный файл, например _variables.scss и импортировать его в местах, где вам нужны эти переменные. Не стоит убирать scoped, вам потом сложно будет ориентироваться в стилях и могут возникать проблемы из-за невнимательности, из-за чего вы потеряете время на отладке. Лучше вынесите в файл. https://vue-loader.vuejs.org/guide/scoped-css.html

БЛОГ НА HUSL

Не работает vue3 и переменные scss

Ответы (1 шт):