Vue3组件中使用Sass时CSS变量无法生效的问题求助

问题描述 #

在Vue 3项目中使用Sass，在HelloWorld.vue组件内通过@use导入了main.scss文件。main.scss的:root中定义了--blue等CSS变量，但组件内使用var(--blue)时无法识别该变量；不过若在main.scss中直接编写h3的样式，组件内的h3能正常应用该样式，说明文件导入正常，需排查问题原因。

相关代码 #

HelloWorld.vue

<template>
  <div class="greetings">
    <h1>{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
  </div>
</template>

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>

<style scoped lang="scss">
@use "sass:list";
@use "@/assets/sass-folder/variables";
@use "@/assets/sass-folder/main";
h1 {
    color: list.nth(variables.$theme-lighten-1, 2);
}
    
h3 {
  color: var(--blue);
}

</style>

main.scss

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

//h3 {
//    color: red;
//}

原因与解决方案 #

• 核心原因：你给HelloWorld.vue的<style>标签加了scoped属性。scoped会给组件内所有元素添加唯一属性选择器（如data-v-xxxxxx），同时让导入的CSS规则带上这个属性前缀。但:root是全局选择器，不会被添加前缀，因此里面定义的CSS变量无法作用到带前缀的组件元素上；而直接写h3样式时，Sass会编译成h3[data-v-xxxxxx]，能匹配到组件内的h3，所以样式生效。

• 解决方案1：全局导入main.scss
  将main.scss的导入放到项目全局入口文件（如main.js/main.ts）中，这样:root的CSS变量会全局生效，组件内直接用var(--blue)即可访问。示例：

  import '@/assets/sass-folder/main.scss'
  

  同时移除组件内@use "@/assets/sass-folder/main";这行代码。

• 解决方案2：移除scoped属性（不推荐）
  如果不需要样式隔离，可直接去掉<style>标签的scoped属性，导入的:root变量就能正常作用到组件元素。但此方式会导致组件样式污染全局，大型项目不建议使用。

• 解决方案3：在组件根元素定义局部CSS变量
  若只想在当前组件使用这些变量，可在组件根元素（如.greetings）上定义CSS变量替代:root：
  修改main.scss：

  .greetings {
    --blue: #1e90ff;
    --white: #ffffff;
  }
  

  这样.greetings会被加上scoped的属性前缀，变量能作用到组件内子元素，var(--blue)可正常识别。

内容的提问来源于stack exchange，提问作者hamid-davodi