变量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";