報錯信息:
[plugin:vite:css] [sass] @use rules must be written before any other rules.
@use 官方說明 注意事項:
https://sass-lang.com/documentation/at-rules/use/
樣式表中的 @use 規則必須位于所有其他規則(除 @forward 外)之前,包括樣式規則。但允許在 @use 規則前聲明變量,以便后續用于模塊配置。
但是我在項目組件中使用,是在第一行位置,為什么還報錯呢?
定位問題
vite.config.ts 這個配置文件中,通過 additionalData 配置,系統會自動在每個 SCSS 文件的開頭注入 @import “@/assets/styles/variables.scss”; 這行代碼。
這個和@use必須在scss文件的第一行沖突,所以頁面會報錯。
解決問題:
additionalData 中的導入方式改成scss的 @use 即可。