vite+vue3项目中,单个组件中使用 @use报错

报错信息:

[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 即可。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/news/908317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于VMD-LSTM融合方法的F10.7指数预报

F10.7 Daily Forecast Using LSTM Combined With VMD Method ​​F10.7​​ solar radiation flux is a well-known parameter that is closely linked to ​​solar activity​​, serving as a key index for measuring the level of solar activity. In this study, the ​​…

React 新项目

使用git bash 创建一个新项目 建议一开始就创建TS项目 原因在Webpack中改配置麻烦 编译方法:ts compiler 另一种 bable 最好都配置 $ create-react-app cloundmusic --template typescript 早期react项目 yarn 居多 目前npm包管理居多 目前pnpm不通用 icon 在public文件夹中…

2025年- H65-Lc173--347.前k个高频元素(小根堆,堆顶元素是当前堆元素里面最小的)--Java版

1.题目描述 2.思路 (1)这里定义了一个小根堆(最小堆),根据元素的频率从小到大排序。小根堆原理:堆顶是最小值,每次插入或删除操作会保持堆的有序结构(常用二叉堆实现)。 …

VR/AR 显示瓶颈将破!铁电液晶技术迎来关键突破

在 VR/AR 设备逐渐走进大众生活的今天,显示效果却始终是制约其发展的一大痛点。纱窗效应、画面拖影、眩晕感…… 传统液晶技术的瓶颈让用户体验大打折扣。不过,随着铁电液晶技术的重大突破,这一局面有望得到彻底改变。 一、传统液晶技术瓶颈…

【bug】Error: /undefinedfilename in (/tmp/ocrmypdf.io.9xfn1e3b/origin.pdf)

在使用ocrmypdf的时候,需要Ghostscript9.55及以上的版本,但是ubuntu自带为9.50 然后使用ocrmypdf报错了 sudo apt update sudo apt install ghostscript gs --version 9.50 #版本不够安装的版本为9.50不够,因此去官网https://ghostscript.c…

【TinyWebServer】线程同步封装

目录 POSIX信号量 int sem_init(sem_t* sem,int pshared,unsingned int value); int sem_destroy(sem_t* sem); int sem_wait(sem_t* sem); int sem_post(sem_t* sem); 互斥量 条件变量 为了对多线程程序实现同步问题,可以用信号量POSIX信号量、互斥量、条件变…

打造高效多模态RAG系统:原理与评测方法详解

引言 随着信息检索与生成式AI的深度融合,检索增强生成(RAG, Retrieval-Augmented Generation) 已成为AI领域的重要技术方向。传统RAG系统主要依赖文本数据,但真实世界中的信息往往包含图像、表格等多模态内容。多模态RAG&#xf…

Unity安卓平台开发,启动app并传参

using UnityEngine; using System;public class IntentReceiver : MonoBehaviour {public bool isVR1;void Start(){Debug.LogError("app1111111111111111111111111");if (isVR1){LaunchAnotherApp("com.HappyMaster.DaKongJianVR2");}else{// 检查是否有传…

云计算 Linux Rocky day05【rpm、yum、history、date、du、zip、ln】

云计算 Linux Rocky day05【rpm、yum、history、date、du、zip、ln】 目录 云计算 Linux Rocky day05【rpm、yum、history、date、du、zip、ln】1.RPM包的一般安装位置2.软件名和软件包名3.查询软件信息4.查询软件包5.导入红帽签名信息,解决查询软件包信息报错6.利用…

【图像处理3D】:点云图是怎么生成的

点云图是怎么生成的 **一、点云数据的采集方式****1. 激光雷达(LiDAR)****2. 结构光(Structured Light)****3. 双目视觉(Stereo Vision)****4. 飞行时间相机(ToF Camera)****5. 其他…

javaweb -html -CSS

HTML是一种超文本标记语言 超文本&#xff1a;超过了文本的限制&#xff0c;比普通文本更强大&#xff0c;除了文字信息&#xff0c;还可以定义图片、音频、视频等内容。 标记语言&#xff1a;由标签"<标签名>"构成的语言。 CSS:层叠样式表&#xff0c;用于…

pyinstaller 安装 ubuntu

安装命令 pip install pyinstaller 读取安装路径 ➜ ~ find ~/.local/ -name pyinstaller/home/XXX/.local/bin/pyinstaller 路径配置 vi ~/.zshrc 添加到文件最后 export PATH"$PATH:/home/XXX/.local/bin/" 查看版本号 ➜ ~ source ~/.zshrc➜ ~ pyi…

【前端】掌握HTML/CSS宽高调整:抓住问题根源,掌握黄金法则

一、宽高控制的「黄金法则」 问题根源&#xff1a;为什么设置了宽高没效果&#xff1f; <!-- 典型失败案例 --> <style>.problem-box {width: 200px;height: 100px;padding: 20px; /* 实际变成240x140px&#xff01; */border: 5px solid red; /* 最终250x150px&…

LuaJIT2.1 和 Lua5.4.8 性能对比

说明 最近在学习 LuaJIT&#xff0c;想看看把它接入到项目中使用&#xff0c;会提高多大的性能。 今天抽时间&#xff0c;简单地测试了一下 LuaJIT 2.2 和 Lua5.4.8 的性能。 测试平台&#xff1a; 系统&#xff1a;Windows 10 WSLCPU&#xff1a;Intel Core™ i7-8700 CPU…

Arduino学习-按键灯

哎&#xff0c;别笑&#xff0c;总比刷抖音强点吧 1、效果 2、代码 const int buttonPin2; const int ledPin13;int buttonState0;void setup() {// put your setup code here, to run once:pinMode(buttonPin,INPUT);pinMode(ledPin,OUTPUT); }void loop() {// put your mai…

强化学习鱼书(10)——更多深度强化学习的算法

&#xff1a;是否使用环境模型&#xff08;状态迁移函数P(s’|s,a)和奖 励函数r(s&#xff0c;a&#xff0c;V)&#xff09;。不使用环境模型的方法叫作无模型&#xff08;model-free&#xff09;的方法&#xff0c;使用环境模型的方法叫作有模型&#xff08;model-based&#…

9.axios底层原理,和promise的对比(2)

&#x1f63a;&#x1f63a;&#x1f63a; 和promise的对比 完全可以直接使用 Promise 来发 HTTP 请求&#xff0c;比如用原生 fetch Promise 就可以实现网络请求功能&#x1f447; ✅ 用 Promise fetch 的写法&#xff08;原生&#xff09; fetch(‘https://api.example.c…

什么是数据孤岛?如何实现从数据孤岛到数据共享?

目录 一、数据孤岛是什么&#xff1f; &#xff08;一&#xff09;数据孤岛的定义 &#xff08;二&#xff09;数据孤岛怎么形成的 二、数据孤岛带来的问题 &#xff08;一&#xff09;数据冗余和不一致 &#xff08;二&#xff09;决策效率低下 &#xff08;三&#xf…

MQTT入门实战宝典:从零起步掌握物联网核心通信协议

MQTT入门实战宝典&#xff1a;从零起步掌握物联网核心通信协议 前言 物联网时代&#xff0c;万物互联已成为现实&#xff0c;而MQTT协议作为这个时代的"数据总线"&#xff0c;正默默支撑着从智能家居到工业物联的各类应用场景。本文将带你揭开MQTT的神秘面纱&#…

I2C通信讲解

I2C总线发展史 怎么在一条串口线上连接多个设备呢&#xff1f; 由于速度同步线是由主机实时发出的&#xff0c;所以主机可以按需求修改通信速度&#xff0c;这样在一条线上可以挂接不同速度的器件&#xff0c;单片机和性能差的器件通信&#xff0c;就输出较慢的脉冲信号&#x…