vue学习——集成sass

安装

pnpm i sass sass-loader -D

在vite.config.ts文件配置:

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

创建三个文件

src/styles/index.scss // 公共样式
src/styles/reset.scss // 清除默认样式
src/styles/variables.scss // 设置全局变量

// index.scss
@import './reset.scss'; // 注意:分号不能少!
// reset.scss
// 去npm中搜索reset.scss放到这里
/*** ENGINE* v0.2 | 20150615* License: none (public domain)*/*,
*:after,
*:before {box-sizing: border-box;outline: none;
}html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {font: inherit;font-size: 100%;margin: 0;padding: 0;vertical-align: baseline;border: 0;
}article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {display: block;
}body {line-height: 1;
}ol,
ul {list-style: none;
}blockquote,
q {quotes: none;&:before,&:after {content: '';content: none;}
}sub,
sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;
}
sup {top: -.5em;
}
sub {bottom: -.25em;
}table {border-spacing: 0;border-collapse: collapse;
}input,
textarea,
button {font-family: inhert;font-size: inherit;color: inherit;
}select {text-indent: .01px;text-overflow: '';border: 0;border-radius: 0;-webkit-appearance: none;-moz-appearance: none;
}
select::-ms-expand {display: none;
}code,
pre {font-family: monospace, monospace;font-size: 1em;
}
// variables.scss
$color: skyblue

App.vue中测试一下,是否已清除默认样式,全局变量是否生效。

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

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

相关文章

PyTorch 2.2 中文官方教程(十八)

开始使用完全分片数据并行(FSDP) 原文:pytorch.org/tutorials/intermediate/FSDP_tutorial.html 译者:飞龙 协议:CC BY-NC-SA 4.0 作者:Hamid Shojanazeri,Yanli Zhao,Shen Li 注意…

Hudi学习 6:Hudi使用

准备工作: 1.安装hdfs https://mp.csdn.net/mp_blog/creation/editor/109689143 2.安装spark spark学习4:spark安装_hzp666的博客-CSDN博客 3.安装Scala Hudi学习6:安装和基本操作_hzp666的博客-CSDN博客 spark-shell 写入和读取hudi 2.…

python常用pandas函数nlargest / nsmallest及其手动实现

目录 pandas库 Series和DataFrame nlargest和nsmallest 用法示例 代替方法 手动实现 模拟代码 pandas库 是Python中一个非常强大的数据处理库,提供了高效的数据分析方法和数据结构。它特别适用于处理具有关系型数据或带标签数据的情况,同时在时间序列分析方面也有着出…

Springboot mybatis关于bean中含有表中不存在的字段

1、当使用mybatis plus时,可用TableField(exist false) Data TableName("comp_sta_scale_t") public class Scale implements Serializable {/*** 唯一主键*/TableIdprivate String id;/*** 资源id*/Excel(name "资源id", mergeVertical tr…

基于springboot地方美食分享网站源码和论文

基于springboot地方美食分享网站源码和论文361 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然…

嵌入式中经典面试题分析

1.关键字static的作用是什么?为什么static变量只初始化一次? 1)修饰局部变量:使得变量变成静态变量,存储在静态区,存储在静态区的数据周期和程序相同, 在main函数开始前初始化,在退…

7min到40s:SpringBoot 启动优化实践!

目录 背景 1 耗时问题排查 1.1 观察 SpringBoot 启动 run 方法 1.2 监控 Bean 注入耗时 2 优化方案 2.1 如何解决扫描路径过多? 2.2 如何解决 Bean 初始化高耗时? 3 新的问题 3.1 SpringBoot 自动化装配,让人防不胜防 3.2 使用 sta…

泡泡清新文艺的微社区系统PHP源码

泡泡微社区,小巧而强大,为您带来卓越的社区交流体验。 凭借GoZinc的先进架构,泡泡在保持轻盈身姿的同时,功能一应俱全。前端采用Vue3匠心打造,界面清新简约,三栏式布局仿若Twitter,让您一见倾心…

四、Redis之配置文件

redis配置文件的名称 redis.conf 通过命令 find / -name redis.confvim redis.conf通过 : set nu 设置行号: set nonu 取消行号/关键字 搜索关键字: set noh 取消高亮选择4.1 Units 配置大小单位,开头定义了一些基本的度量单位,只支持 bytes&#…

基于Springboot的校园失物招领网站(有报告)。Javaee项目,springboot项目。

演示视频: 基于Springboot的校园失物招领网站(有报告)。Javaee项目,springboot项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构…

【数据结构】排序---C语言版

七大排序算法 一、对于排序的分类:二、插入排序1、直接插入排序(1)基本思想:(2)直接插入排序:(3)代码实现:(4)总结: 2、希…

【Django】ORM关系映射

关系映射 在关系型数据库中,通常不会把所有数据都放在同一张表中,不易于扩展,常见的关系映射有: 一对一映射,如一个身份证对应一个人。 一对多映射,如一个班级可以有多个学生。 多对多映射,如…

thinkphp6入门(16)-- cache用法总结

在ThinkPHP 6中,缓存功能被集成到框架中,可以通过Cache类来使用。以下是一些在ThinkPHP 6中使用缓存的基本用法: 配置缓存驱动: 打开 config/cache.php 文件,选择合适的缓存驱动,并配置相应的参数&#xff…

初始数据库

华子目录 什么是数据库DBMS(数据库管理系统)数据库系统和文件系统的区别文件系统数据库系统对比区别优缺点总结 常见数据库关系型数据库ACID原则关系型数据库的优缺点优点缺点 非关系型数据库存储方式常见的非关系型数据库非关系型数据库的优缺点优点缺点…

Vivado Tri-MAC IP的例化配置(三速以太网IP)

目录 1 Tri-MAC IP使用RGMII接口的例化配置1.1 Data Rate1.2 interface配置1.3 Shared Logic配置1.4 Features 2 配置完成IP例化视图 1 Tri-MAC IP使用RGMII接口的例化配置 在网络设计中,使用的IP核一般为三速以太网IP核,使用时在大多数场景下为配置为三…

flask的基本使用 token插件(二)

一、安装flask-jwt-extended 安装flask-jwt-extend得时候 会自动安装一个pyjwt得库。pyjwt可以直接使用来生成JWT和验证。但是在flask中,可以通过Flask-JWT-Extended来实现JWT能,因为他封装了使用方式,以及一些属性和装饰器,用起…

Java tomcat 使用spring-task,实现定时任务功能

前言 今天接触到一个需求,需要添加一个定时任务功能,第一反应是启动类EnableScheduling、定时任务方法使用Scheduled实现,导入项目后才发现,这个项目是ssm整合框架的tomcat项目,没有启动类, 于是改变了思路…

有趣的CSS - 鼠标悬浮线条动态变化

鼠标悬浮线条动态变化 整体效果核心代码html 代码:css 部分代码: 完整代码如下html 页面:css 样式:页面渲染效果: 整体效果 这个链接悬浮效果主要用 css3 的 animation 属性配合 :hover 伪选择器来实现的。 此效果可以…

从零开始 TensorRT(3)Python 篇:解析 ONNX、PyTorch TensorRT 接口

前言 学习资料: TensorRT 源码示例 官方文档:Working With TensorRT Using The Python API 官方文档:TensorRT Python 官方文档:CUDA Python B站视频教程 视频配套代码 cookbook 示例:解析 ONNX 模型 参考源码&…

get通过发送Body传参-工具类

1、调用方式 String url "http://ip/xxx/zh/xxxxx/xxxx/userCode"; //进行url中的对应的参数 url2 url2.replace("ip",bancirili); url2 url2.replace("zh",zh); url2 url2.replace("userCode",userCode);String dateTime xxxx; //组…