vue3.0 + vite:中使用 sass

news2024/10/27 5:32:28

1、安装依赖

npm i sass sass-loader --save-dev

在项目的src/assets文件夹下新建style/index.scss 文件
在这里插入图片描述
2、在 vite.config.ts 中加:
在这里插入图片描述

resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url))
  }
},
css: {
  // 配置 SCSS 支持
  preprocessorOptions: {
    scss: {
      additionalData: `@use "@/assets/index.scss" as *;`
    }
  }
}

3、在组件再直接引用即可
在这里插入图片描述

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

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

相关文章

Mybatis Plus连接使用ClickHouse也如此简单

通过阅读列式数据库ClickHouse官网&#xff0c;不难看出它有支持JDBC规范的驱动jar包&#xff0c;可以直接集成到Object Relational Mapping框架等&#xff0c;下面我用SpringBootMybatisPlus环境连接ClickHouse来演示一下 集成步骤 1.Maven引入ClickHouse提供的JDBC依赖 <…

解决海外社媒风控问题的工具——云手机

随着中国企业逐步进入海外市场&#xff0c;海外社交媒体的风控问题严重影响了企业的推广效果与账号运营。这种背景下&#xff0c;云手机作为一种新型技术解决方案&#xff0c;正日益成为企业应对海外社媒风控的重要工具。 由于海外社媒的严格监控&#xff0c;企业经常面临账号流…

linux驱动-platform子系统

目录 1.传统字符设备驱动框架的缺点 2.总线、设备、驱动 3.设备注册 4.驱动注册 1.传统字符设备驱动框架的缺点 缺点&#xff1a;驱动可移植性差&#xff0c;原因是驱动里面包括了很多该芯片特有的消息&#xff0c;如果是其他平台&#xff0c;硬件信息会有差异&#xff0c;…

七、Linux 之用户管理

基本介绍 Linux 系统是一个多用户多任务的操作系统&#xff0c;任何一个要使用系统资源的用户&#xff0c;都必须首先向系统管理员申请一个账号&#xff0c;然后以这个账号的身份进入系统 添加用户 useradd 用户名添加一个用户 milan, 默认该用户的家目录在 /home/milan 细节说…

深入Postman- 自动化篇

前言 在前两篇博文《Postman使用 - 基础篇》《玩转Postman:进阶篇》中,我们介绍了 Postman 作为一款专业接口测试工具在接口测试中的主要用法以及它强大的变量、脚本功能,给测试工作人员完成接口的手工测试带来了极大的便利。其实在自动化测试上,Postman 也能进行良好的支…

【特赞-注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

SQL分类中的DDL

DDL&#xff08;Data Definition Language):数据定义语言&#xff0c;用来定义数据库对象&#xff08;数据库&#xff0c;表&#xff0c;字段&#xff09;。 一、DDL语句操作数据库 1、查询所有数据库&#xff1a;show databases&#xff1b;&#xff08;一般用大写&#xff…

自动化——RPA——影刀——批量刷视频

前言 影刀底层是python https://www.yingdao.com/ 需求 实现视频集的定时点击和播放。 要点 第一步&#xff1a;将需要播放的视频链接放到excel中&#xff0c;excel的名字自定义&#xff0c;本文为“批量刷视频”。 第二步&#xff1a;使用影刀的“打开/新建Excel”功能&…

汽车免拆诊断案例 | 2022款大众捷达VS5车行驶中挡位偶尔会锁在D3挡

故障现象  一辆2022款大众捷达VS5汽车&#xff0c;搭载EA211发动机和手自一体变速器&#xff0c;累计行驶里程约为4.5万km。该车行驶中挡位偶尔会锁在D3挡&#xff0c;车速最高约50 km/h&#xff0c;且组合仪表上的发动机故障灯和EPC灯异常点亮。 故障诊断  用故障检测仪检…

Centos7快速安装配置RabbitMQ

1. 卸载现有的 RabbitMQ 和 Erlang&#xff08;可选&#xff09; # 停止 RabbitMQ 服务 sudo systemctl stop rabbitmq-server# 卸载 RabbitMQ sudo yum remove -y rabbitmq-server# 卸载 Erlang sudo yum remove -y erlang# 删除 RabbitMQ 残留文件 sudo rm -rf /var/lib/rab…

smartctl 设置硬盘的 write-caching

sg3 一、sg3查看缓存状态 您可以使用sg_modes命令来查看SAS盘和SATA盘的缓存状态。例如&#xff0c;要查看/dev/sdb设备的缓存状态&#xff0c;您可以执行以下命令&#xff1a; sg_modes -p 8,0 /dev/sdb 二、sg3关闭机械盘写缓存状态&#xff08;仅适用于SAS盘&#xff09…

ollama + fastgpt+m3e本地部署

ollama fastgptm3e本地部署 开启WSL更新wsl安装ubuntu docker下载修改docker镜像源开启WSL integration 安装fastgpt先创建一个文件夹来放置一些配置文件用命令下载fastgpt配置文件用命令下载docker的部署文件 启动容器M3E下载ollama下载oneapi配置登录oneapi配置ollama渠道配…

拥抱云原生

专题七&#xff1a;云原生实战72课时 专题简介&#xff1a; 云原生正在改变世界&#xff0c;新一代架构思想ServiceMesh、Serverless改变传统软件架构模式&#xff0c;本专题基于完全云上架构实战&#xff0c;结合微服务架构和云计算平台两者的优势&#xff0c;属于架构师必备…

LabVIEW智能可变温循环PCT测试系统

随着全球能源危机的加剧和环境保护需求的提升&#xff0c;开发和利用清洁能源已成为全球必然趋势。氢能作为一种高效的替代能源&#xff0c;正逐步受到关注。然而&#xff0c;储氢技术的研究至关重要&#xff0c;尤其是储氢材料的PCT&#xff08;Pressure-Composition-Temperat…

如何使用UART(STM32 HAL库)

UART &#xff08;通用异步收发器&#xff09;是在 USART &#xff08;通用同步异步收发器&#xff09;基础上裁剪掉了同步通信功能&#xff0c;只剩下异步通信功能。关于通信和串口的基本知识&#xff0c;可参见文章《串口通信简介-CSDN博客》和《数据通信的一些基础概念-CSDN…

红杉资本行业总结篇:生成式 AI 的发展

Datawhale干货 最新&#xff1a;红杉资本&#xff0c;全球著名风险投资公司 生成式 AI 的发展&#xff1a;从 “快思考” 到 “慢思考”&#xff0c;开启自主应用的新篇章。 在生成式 AI 革命的两年里&#xff0c;研究方向正从 “快思考”&#xff08;快速预训练响应&#xff…

Mysql(九) --- 事务

文章目录 前言1.什么是事务&#xff1f;2.事务的ACID特性3.为什么要使用事务&#xff1f;4.如何使用事务4.1.查看支持事务的 存储引擎4.2.语法4.3.开启一个事务&#xff0c;执行修改后回滚4.4.开启一个事务&#xff0c;执行修改后提交4.5.保存点4.6.自动/手动提交事务 5.事务的…

[含文档+PPT+源码等]精品大数据项目-springboot基于Hadoop框架实现的高校图书馆阅读书目推荐系统

关于大数据项目——Spring Boot基于Hadoop框架实现的高校图书馆阅读书目推荐系统的课题背景&#xff0c;可以从以下几个方面进行阐述&#xff1a; 一、信息技术发展的推动 随着信息技术的迅猛发展&#xff0c;互联网上的信息数据量呈爆炸式增长。这种信息过载现象使得用户难以…

2014年国赛高教杯数学建模A题嫦娥三号软着陆轨道设计与控制策略解题全过程文档及程序

2014年国赛高教杯数学建模 A题 嫦娥三号软着陆轨道设计与控制策略 嫦娥三号于2013年12月2日1时30分成功发射&#xff0c;12月6日抵达月球轨道。嫦娥三号在着陆准备轨道上的运行质量为2.4t&#xff0c;其安装在下部的主减速发动机能够产生1500N到7500N的可调节推力&#xff0c;…

如何优雅的通过Spring Boot+Redission对订单实现定时关闭

简介 在电子商务及支付相关平台中&#xff0c;常规流程是首先生成订单或支付请求&#xff0c;用户随后会在规定时间内完成支付。如果用户未能在预设时限内完成支付动作&#xff0c;系统通常会执行相应的过期处理机制&#xff0c;即自动取消未支付的订单。 此外&#xff0c;这…