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 watch监听使用的几种方法

    Vue watch监听使用的几种方法

    watch是由用户定义的数据监听,当监听的属性发生改变就会触发回调,这项配置在业务中是很常用。在面试时,也是必问知识点,一般会用作和computed进行比较。那么本文就来带大家从源码理解watch的工作流程,以及依赖收集和深度监听的实现
    2022-12-12
  • vue如何解决this.refs拿取v-for下元素undefine问题

    vue如何解决this.refs拿取v-for下元素undefine问题

    这篇文章主要介绍了vue如何解决this.refs拿取v-for下元素undefine问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue-router命名视图的使用讲解

    vue-router命名视图的使用讲解

    今天小编就为大家分享一篇关于vue-router命名视图的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Vue中对数组和对象进行遍历和修改方式

    Vue中对数组和对象进行遍历和修改方式

    这篇文章主要介绍了Vue中对数组和对象进行遍历和修改方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue3中如何使用rem来控制字体大小问题

    Vue3中如何使用rem来控制字体大小问题

    这篇文章主要介绍了Vue3中如何使用rem来控制字体大小问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue实现放大缩小拖拽功能

    vue实现放大缩小拖拽功能

    这篇文章主要为大家详细介绍了vue实现放大缩小拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • vue 实现把路由单独分离出来

    vue 实现把路由单独分离出来

    这篇文章主要介绍了vue 实现把路由单独分离出来,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue和原生JS中如何使用自定义字体

    Vue和原生JS中如何使用自定义字体

    这篇文章主要为大家详细介绍了Vue和原生JS中如何使用自定义字体,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下
    2024-01-01
  • 利用v-viewer图片预览插件放大需要预览的图片

    利用v-viewer图片预览插件放大需要预览的图片

    本文介绍了v-viewer插件的安装和使用步骤,包括npm安装、在main.js文件中全局引入,以及常用的三种使用方式,文章提供了简单的布局页面效果,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-10-10
  • Vue.js 父子组件通讯开发实例

    Vue.js 父子组件通讯开发实例

    这篇文章主要介绍了Vue.js 父子组件通讯开发实例的相关资料,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09

最新评论