Vue3项目中reset.scss模板使用导入

 更新时间:2023年09月05日 15:59:35   作者:ClearBoth  
这篇文章主要为大家介绍了Vue3项目中reset.scss模板使用导入示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

变量css模板

theme.scss

//导入字体包
@font-face {
  font-family: SYHTHea;
  src: url('../font/SourceHanSansSC-Heavy_0.otf');
  font-weight: normal;
  font-style: normal;
} 
@font-face {
  font-family: SYHTLgt;
  src: url('../font/SourceHanSansSC-Light_0.otf');
  font-weight: normal;
  font-style: normal;
} 
$background:#000000;

变量式样式

项目中需要用到的变量式样式随时再此文件中增加 reset.scss

@import "./theme.scss"; 
// 统一浏览器默认标准盒子模型
// 全局使用字体包
html{
  box-sizing: content-box;
  font-family: SYHTHea;
}
// 清除标签默认间距
html,
body,
div,
span,
applet,
object,
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 {
  margin: 0;
  padding: 0;
  border: 0;
}
/* 旧版本浏览器对H5新标签兼容处理 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
// 清除标签默认样式
ol,
ul,
li {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
// 表格重置
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th,
td {
  vertical-align: middle;
}
/* 全局自定义标签样式 */
a {
  outline: none;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}
a:focus {
  outline: none;
}
input:focus,
select:focus,
textarea:focus {
  outline: -webkit-focus-ring-color auto 0;
}
// 滚动条样式
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba($color: #ffffff, $alpha: 0.7);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.3);
  &:hover {
    background-color: rgba(0, 0, 0, 0.53);
    cursor: pointer;
  }
}

结语

最后在main.js或者app.vue中引用就可以了

import "./assets/styles/reset.scss";

以上就是Vue3项目中reset.scss模板使用导入的详细内容,更多关于Vue3 reset.scss模板的资料请关注脚本之家其它相关文章!

相关文章

  • VUE设置和清除定时器的方式及遇到的问题

    VUE设置和清除定时器的方式及遇到的问题

    ​最近需要再页面里做个倒计时,发现用clearInterval()清除定时器失效,下面这篇文章主要给大家介绍了关于VUE设置和清除定时器的方式及遇到的问题的相关资料,需要的朋友可以参考下
    2022-10-10
  • 基于vue编写一个月饼连连看游戏

    基于vue编写一个月饼连连看游戏

    中秋节快要到啦,我们一起用Vue创建一个简单的连连看游戏,连连看大家一定都玩过吧,通过消除相同的图案来清理棋盘,小编将一步步引导大家完成整个游戏的制作过程,让我们开始吧,一起为中秋节增添一些互动和娱乐
    2023-09-09
  • 前端vue3使用axios调用后端接口的实现方法

    前端vue3使用axios调用后端接口的实现方法

    vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,下面这篇文章主要给大家介绍了关于前端vue3使用axios调用后端接口的实现方法,需要的朋友可以参考下
    2022-12-12
  • vue2.0中组件传值的几种方式总结

    vue2.0中组件传值的几种方式总结

    这篇文章主要介绍了vue2.0中组件传值的几种方式总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue-cli3.0项目打包后如何修改访问后端地址

    vue-cli3.0项目打包后如何修改访问后端地址

    这篇文章主要介绍了vue-cli3.0项目打包后如何修改访问后端地址,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 如何使用uniapp内置组件webview消息传递详解

    如何使用uniapp内置组件webview消息传递详解

    uni-app的web-view组件用于在应用中打开网页,并支持应用和网页之间的消息传递,这篇文章主要介绍了如何使用uniapp内置组件webview消息传递的相关资料,需要的朋友可以参考下
    2025-02-02
  • el-form的model、prop属性和表单校验等使用

    el-form的model、prop属性和表单校验等使用

    本文主要介绍了el-form的model、prop属性和表单校验等使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 在UniApp中使用WebView实现双向通信完整代码

    在UniApp中使用WebView实现双向通信完整代码

    这篇文章主要介绍了在UniApp中使用WebView实现双向通信的相关资料,适用于需调用不支持的API(如文件上传)的场景,包含Vue与HTML间的数据交互及调试技巧,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-06-06
  • vue3使用localStorage实现登录注册功能实例

    vue3使用localStorage实现登录注册功能实例

    这篇文章主要给大家介绍了关于vue3使用localStorage实现登录注册功能的相关资料, localStorage这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题,需要的朋友可以参考下
    2023-06-06
  • 如何使用vue3+uni-app封装音乐播放插件

    如何使用vue3+uni-app封装音乐播放插件

    UniApp是一个基于Vue.js开发的跨平台应用开发框架,它可以使用一套代码同时构建iOS、Android和Web应用,这篇文章主要给大家介绍了关于如何使用vue3+uni-app封装音乐播放插件的相关资料,需要的朋友可以参考下
    2023-11-11

最新评论