我在用Vite+Vue3开发时，按照文档在组件style标签里写了lang=”scss&#8221 […]

Vite项目中Sass变量在Vue组件里失效怎么办？

司徒世昌提问于 2026-02-06 19:54:28 阅读 46

前端

我在用Vite+Vue3开发时，按照文档在组件style标签里写了lang=”scss”，但定义的$primary-color变量一直报未识别的标识符错误，控制台提示”undefined variable”。

这是我的组件代码：


<template>
  <div class="container">测试颜色</div>
</template>

<script setup>
</script>

<style lang="scss">
$primary-color: #41b883;

.container {
  color: $primary-color; // 这里报错
}
</style>

已经安装了sass包，但问题依旧。网上说Vite默认支持预处理，是不是需要额外配置？或者变量写法有问题？

Flexbox

我来解答赞 4 收藏

反馈

1 条解答

欧阳胜洋 Lv1

你这个情况我遇到过，是Sass变量作用域的问题。Vite虽然默认支持预处理器，但每个组件里的样式是隔离的，直接在组件里定义的变量不会自动注入到其他组件或者全局。

解决方法很简单：把变量单独抽出来，用文件引入的方式就行。比如创建一个_variables.scss文件：

// src/assets/scss/_variables.scss

$primary-color: #41b883;

然后在你的组件里导入这个文件：

<style lang="scss">

@import "@/assets/scss/variables";



.container {

  color: $primary-color;

}

</style>

这样变量就生效了。注意路径要写对，用@可以快速指向src目录。如果你用的是.scss后缀，Vite会自动处理，不用额外配什么loader。

2026-02-06 20:03