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 Element-UI多级菜单动态渲染的组件

    详解VUE Element-UI多级菜单动态渲染的组件

    这篇文章主要介绍了VUE Element-UI多级菜单动态渲染的组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue实现一拉到底的滑动验证

    vue实现一拉到底的滑动验证

    这篇文章主要为大家详细介绍了vue简单的一拉到底的滑动验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • vue使用v-for实现hover点击效果

    vue使用v-for实现hover点击效果

    hover是css中的选择器,用于选择鼠标指针浮动在上面的元素。这篇文章主要介绍了vue使用v-for实现hover点击效果,需要的朋友可以参考下
    2018-09-09
  • 详解mpvue实现对苹果X安全区域的适配

    详解mpvue实现对苹果X安全区域的适配

    这篇文章主要介绍了详解mpvue实现对苹果X安全区域的适配,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 在Vue3中使用vue-qrcode库实现二维码生成的方法

    在Vue3中使用vue-qrcode库实现二维码生成的方法

    在Vue3中实现二维码生成需要使用第三方库来处理生成二维码的逻辑,常用的库有 qrcode和 vue-qrcode,这篇文章主要介绍了在Vue3中使用vue-qrcode库实现二维码生成,需要的朋友可以参考下
    2023-12-12
  • 利用vue3+ts实现管理后台(增删改查)

    利用vue3+ts实现管理后台(增删改查)

    这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • vue自定义指令实现v-tap插件

    vue自定义指令实现v-tap插件

    这篇文章主要为大家详细介绍了vue自定义指令实现v-tap插件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Vue的自定义事件之组件通信工具详解

    Vue的自定义事件之组件通信工具详解

    这篇文章主要介绍了Vue的自定义事件之组件通信工具详解,Vue的自定义事件(Custom Events)是一种强大的工具,用于实现组件之间的通信和数据传递,本文将深入探讨什么是Vue的自定义事件,以及如何自定义和使用它们,需要的朋友可以参考下
    2023-10-10
  • Vue刷新修改页面中数据的方法

    Vue刷新修改页面中数据的方法

    今天小编就为大家分享一篇Vue刷新修改页面中数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue中进行打包与部署的方法实例

    Vue中进行打包与部署的方法实例

    这篇文章主要给大家介绍了关于Vue中进行打包与部署的相关资料, 我们常使用前后端分离项目时,会需要将前端vue打包然后部署,需要的朋友可以参考下
    2023-09-09

最新评论