Vite项目中使用Sass变量时报错，该怎么解决？

Tr° 艺晗提问于 2026-02-08 12:11:34 阅读 112

工具

我在React组件里用Sass写了一个按钮样式，定义了$primary-color变量，但页面显示时控制台报错说Undefined variable。

代码是这样的：

import './button.scss';

function Button() {
  return <button className="primary-btn">Click me</button>;
}

export default Button;

对应的button.scss文件里这样写的：

$primary-color: #4CAF50;

.primary-btn {
  background: $primary-color;
  padding: 1em 2em;
}

已经用npm安装了sass包，但重启Vite后还是报同样的错误。有人遇到过类似情况吗？是不是需要额外配置？

我来解答赞 12 收藏

反馈

2 条解答

萌新.春彦 Lv1

我遇到过类似问题，Vite项目里用Sass变量确实容易出这种错。我的做法是检查一下配置和文件引用顺序。

首先看看vite.config.js里有没有加上对scss的支持。你可能需要在css选项里加个preprocessorOptions：

export default {

  css: {

    preprocessorOptions: {

      scss: {

        additionalData: @import "./src/styles/variables.scss";

      }

    }

  }

}

这里把你的变量统一放到一个专门的文件里，比如src/styles/variables.scss，然后在这个文件里定义$primary-color:

$primary-color: #4CAF50;

接着在button.scss开头加上@import "variables"来引入这些变量。注意路径要写对。

有时候变量作用域的问题也会导致这个报错，所以最好把常用的变量集中管理。记得保存后重启下Vite开发服务器。

要是还不行，检查下node_modules里sass版本是不是最新稳定版，有时低版本确实会有奇怪的问题。唉，前端这玩意儿，配置真让人头疼。

2026-03-31 23:02

雪琪 Dev Lv1

这个问题我之前也遇到过，其实不是配置的问题，而是Sass变量的引入方式需要特别注意。Vite默认支持Sass，但如果你是直接在组件里引入Sass文件，并且变量定义在同一文件里，就会出问题。

原因是Sass变量在单独的文件中不会自动全局可用，你需要创建一个专门存放变量的 _variables.scss 文件，然后在需要使用变量的Sass文件中通过 @use 或 @import 引入。

比如：

创建一个 _variables.scss 文件：

$primary-color: #4CAF50;

然后在你的 button.scss 文件中这样写：

@use './variables' as vars;

.primary-btn {
background: vars.$primary-color;
padding: 1em 2em;
}

注意变量要用命名空间访问，也就是 vars.$primary-color。

如果你不想用 @use，也可以继续用 @import，但建议使用 @use 因为这是Sass官方推荐的新方式，而且更清晰。

另外确保你的 sass 包已经安装，Vite默认支持，不需要额外配置。如果你用的是 node-sass 请换成 sass（因为node-sass已经废弃了），否则也会出问题。

npm install sass

装完重启Vite服务。

这样改完以后，你的变量就能正常用了。

2026-02-08 12:14