Переменная scss из view в component?

Question

[dominy]

Здравствуйте, у меня есть Vue 3 component

<template>
  <div class="block">test for red color</div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

<style lang="scss">
.block {
  color: $color-text;
}
</style>

и есть view

<template>
  <div class="home">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
};
</script>
<style scoped lang="scss">
$color-text: red;
</style>

Однако переменная scss обявленая в view не видна в компоненте, могу ли я обявлять переменный scss в родителе и использовать в дочерних компонентах?

Answer 1

[Сергей Левченко]

Нет. Переменные нужно выносить в отдельный файл и импортировать его в нужных вам местах.

Answer 2

[Сергей delphinpro]

VueJS: где лучше хранить css, в компонентах .vue или main.css?