scss variable from view to component?

Question

Sass

Hello I have 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>

and there is a 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>

However, the scss variable declared in the view is not visible in the component, can I declare the scss variable in the parent and use it in the child components?

Answer 1

No. Variables need to be placed in a separate file and imported in the places you need.

Answer 2

VueJS: where is the best place to store css, in .vue components or main.css?