如何在vue3中使用scss

news2024/12/24 10:04:37

要使用scss首先需要下载相关的包
可以在终端使用下面的命令下载相关包

npm install -D sass

在src文件下新建一个文件夹叫做styles
在这里插入图片描述
在文件夹下创建三个文件
index.scss主要用来引用其他文件
reset.scss用来清除默认的样式
variable.scss用来配置全局属性

需要在vite.config.ts中配置一个全局配置

在这里插入图片描述

代码如下

css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },

在这里插入图片描述

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

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

相关文章

生物素结合金纳米粒子(Bt@Au-NPs ) biotin-conjugated Au-NPs

一、定义与特点 定义:生物素结合金纳米粒子,简称BtAu-NPs或biotin-conjugated Au-NPs,是指通过特定的化学反应或物理方法将生物素修饰到金纳米粒子表面,形成稳定的纳米复合材料。 特点: 高稳定性:生物素的修…

上位机图像处理和嵌入式模块部署(mcu项目2:串口日志记录器)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 淘宝上面有一个商品蛮好玩的,那就是日志记录器。说是记录器,其实就是一个模块,这个模块的输入是一个ttl串口&am…

2024年信息素养大赛图形化编程小低组复赛真题-附答案 6547网

2024年全国青少年信息素养大赛图形化编程小低组复赛真题 题目总数:6 总分数:100 第1部分 第 1 题 问答题 【编程实现】点击小绿旗,实现将鱼的所有造型印到舞台区 【具体要求】 1. 将鱼显示出来 全部擦除所有内容 2. 将鱼的造型设…

vue学习day03-指令修饰符、v-bind对于样式控制的增强、v-model应用于其他表单元素

7、指令修饰符 (1)概念: 通过“.”指明一些指令后缀,不同后缀封装了不同的处理操作->简化代码 (2)按键修饰符 keyup.enter->键盘回车监听 (3)v-model修饰符 v-model.tri…

报修小程序论文(设计)开题报告

一、课题的背景和意义 近些年来,随着移动互联网巅峰时期的来临,互联网产业逐渐趋于“小、轻、微”的方向发展,符合轻应用时代特点的各类技术受到了不同领域的广泛关注。在诸多产品中,被誉为“运行着程序的网站”之名的微信小程序…

Linux学习笔记(二)账户和组

一、基本概念 用 户:用户id,被称为UID 基本组:账户id,被称为GID。用户只能加一个基本组。 0代表超级管理员,root账号。 附加组:用户能加多个基本组。 二、添加账户和组 创建用户名tom,失效…

千古雄文《渔樵问对》原文、译文、解析

邵雍《渔樵问对》:开悟奇文,揭示世界的终极意义 【邵雍《渔樵问对》:开悟奇文,揭示世界的终极意义】 邵雍(1011年1月21日-1077年7月27日,宋真宗大中祥符四年十二月二十五日戌时生至神宗熙宁十…

ctfshow web入门 nodejs web334--web337

web334 有个文件下载之后改后缀为zip加压就可以得到两个文件 一个文件类似于index.php 还有一个就是登录密码登录成功就有flag username:ctfshow password:123456因为 return name!CTFSHOW && item.username name.toUpperCase() && item.password passwor…

Python 处理Excel 文件, openpyxl 库的使用:

下载&#xff1a; pip install openpyxl 基本使用&#xff1a; 新建一个Excel 工作簿&#xff1a; 使用openpyxl 需要先导入一个Workbook 类&#xff0c; 使用它可以创建一个Workbook<工作簿>对象&#xff0c; 也就是创建一个Excel表文件&#xff0c; web.active 可用来…

电动卡丁车语音芯片方案选型:让驾驶体验更智能、更安全

在追求速度与激情的电动卡丁车领域&#xff0c;每一次升级都意味着更加极致的驾驶体验。而今天&#xff0c;我们要介绍的&#xff0c;正是一款能够显著提升电动卡丁车智能化与安全性的语音芯片方案——为您的爱车增添一份独特的魅力与安全保障。 智能化升级&#xff0c;从“听…

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片 1 目标效果视频 CamManager 2 CamManager读取本地文件时序 3 BD_Vision_Utility添加代码 3.0 导入链接库 BD_OperatorSets.dllSystem.Windows.Forms.dllOpencvSharp 3.1 导入VisionParam中创建的文件Util_FileO…

《Windows API每日一练》9.1 资源-图标

本节讲述图标、鼠标指针位图、字符串资源表、自定义资源的添加和应用。 本节必须掌握的知识点&#xff1a; 图标 第56练&#xff1a;ICON图标资源 鼠标指针位图 字符串资源表 自定义资源 第57练&#xff1a;字符串资源表和自定义资源 9.1.1 图标 在 Windows 窗口编程中&…

西门子老将,跳槽ABB当CEO~

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 更多的海量【智能制造】相关资料&#xff0c;请到智能制造online知识星球自行下载。 近日&#xff0c;全球领先的电力和自动化技术公司ABB宣布了…

Python | Leetcode Python题解之第223题矩形面积

题目&#xff1a; 题解&#xff1a; class Solution:def computeArea(self, ax1: int, ay1: int, ax2: int, ay2: int, bx1: int, by1: int, bx2: int, by2: int) -> int:area1 (ax2 - ax1) * (ay2 - ay1)area2 (bx2 - bx1) * (by2 - by1)overlapWidth min(ax2, bx2) - …

allWebPlugin中间件实现ActiveX插件在谷歌、火狐、Edge浏览器使用

下载并安装allWebPlugin中间件 1、请从下面地址下载allWebPlugin中间件产品&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1xUyQDzOabh7mU7J7TYhtig?pwdz3q0 提取码&#xff1a;z3q0 如下图所示&#xff0c;下载最新allWebPlugin_x86_v2.0.0.14_stable_20240707…

用XDR的思路保护API安全

云计算飞速发展的今天&#xff0c;越来越多应用程序已经转为选择云原生架构&#xff0c;这就少不了Serverless、微服务、API等技术的协助。 但同时也有越来越多的企业认识到&#xff0c;一定程度的“API安全”在整体安全与合规态势中发挥着至关重要的作用。然而&#xff0c;对…

华为eNSP:HCIA综合实验

一实验要求 HCIA综合实验的配置要求&#xff1a; 1.ISP路由器只能配置IP地址&#xff0c;之后不进行任何配置 2.内部整个网络基于192.168.1.0/24进行地址划分 3.R1/2之间启动OSPF协议&#xff0c;单区域 4.PC1-4自动获取IP地址 5.PC1-4&#xff0c;可以访问PC5&#xff0c;R2…

macbook触控栏养宠物:Touchbar pet for Mac 免费下载

macbook pro自从出了touchbar后&#xff0c;看起来是十分的炫酷&#xff0c;但平时却很少有人使用&#xff0c;为了让touchbar充分利用起来&#xff0c;Touch bar pet就横空出世了&#xff0c;可爱的画风&#xff0c;简单的玩法&#xff0c;让你可以在touchbar上也可以养一只自…

使用 Qt 和 ECharts 进行数据可视化

文章目录 示例图表预览折线图散点图柱状图使用 Qt 和 ECharts 进行数据可视化一、准备工作1. 安装 Qt2. 准备 ECharts二、在 Qt 中使用 ECharts1. 创建 Qt 项目2. 配置项目文件3. 在 UI 中添加 WebEngineView4. 加载 ECharts三、创建折线图、散点图和柱状图1. 折线图2. 散点图3…

8.8.8.8 IP地址的作用

在跟着韦东山老师的学习手册中看见了关于8.8.8.8 IP用于检测网络状态&#xff0c;然后搜索了关于此IP的相关作用如下&#xff1a; 公共DNS服务&#xff1a;8.8.8.8是Google提供的两个公共DNS服务器地址之一&#xff08;另一个是8.8.4.4&#xff09;。DNS&#xff08;域名系统&a…