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

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

工具

我在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后还是报同样的错误。有人遇到过类似情况吗？是不是需要额外配置？

我来解答赞 5 收藏

反馈

1 条解答

雪琪 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