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如何解决this.refs拿取v-for下元素undefine问题
这篇文章主要介绍了vue如何解决this.refs拿取v-for下元素undefine问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05
最新评论