[plugin:vite:css] @use rules must be written before any other rules. ╷ 146 │ @use "sass:color"; │ ^^^^^^^^^^^^^^^^^ ╵ src\uni_modules\uni-datetime-picker\components\uni-datetime-picker\calendar-item.vue 146:3 root stylesheet at uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue:1:0 Error: @use rules must be written before any other rules. ╷ 146 │ @use "sass:color"; │ ^^^^^^^^^^^^^^^^^ ╵ src\uni_modules\uni-datetime-picker\components\uni-datetime-picker\calendar-item.vue 146:3 root stylesheet
时间: 2025-07-01 17:04:59 浏览: 4
你遇到的错误是:
```
Error: @use rules must be written before any other rules.
```
也就是说,**`@use` 规则必须写在所有其他 CSS 或 Sass 规则之前。**
---
## 🔍 错误原因分析
你在 `.vue` 文件中使用了:
```scss
@use "sass:color";
```
但这个语句不是文件中的第一个规则,它出现在了一些其他的样式规则(比如 `.class { ... }`)之后。
### ❌ 错误示例:
```vue
<style lang="scss" scoped>
.example {
color: red;
}
@use "sass:color"; // ❌ 错误:@use 必须放在最前面
</style>
```
---
## ✅ 正确写法
Sass 的语法规范要求 `@use` 必须出现在所有样式规则 **之前**。
### ✅ 修改后的正确代码如下:
```vue
<style lang="scss" scoped>
@use "sass:color"; // ✅ 放在最前面
.example {
color: color.darken($uni-primary, 40%);
}
</style>
```
---
## 📌 特别注意
- 如果你定义了变量、混合(mixin)或使用了 `@import`,也必须确保 `@use` 在最前面;
- 在 Vue 单文件组件中 `<style>` 标签的内容就是整个样式表内容,所以 `@use` 必须是该块的第一个语句;
---
## 🧪 示例对比
| 写法 | 是否合法 | 原因 |
|------|----------|------|
| ```@use "sass:color"; .example { color: red; }``` | ✅ 合法 | `@use` 在前 |
| ``` .example { color: red; } @use "sass:color"; ``` | ❌ 不合法 | `@use` 在后 |
---
## 💡 小技巧
如果你有多个 `@use` 或者需要引入自己的模块,也可以统一放在一起:
```vue
<style lang="scss" scoped>
@use "sass:color";
@use "@/styles/variables" as vars;
.example {
color: color.darken(vars.$uni-primary, 40%);
}
</style>
```
---
## ✅ 总结
> ✅ **Sass 中的 `@use` 必须写在样式表的最前面,在任何选择器或样式声明之前。**
---
###
阅读全文
相关推荐


















