Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入
變量css模板
theme.scss
//導(dǎo)入字體包 @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;
變量式樣式
項(xiàng)目中需要用到的變量式樣式隨時(shí)再此文件中增加 reset.scss
@import "./theme.scss"; // 統(tǒng)一瀏覽器默認(rèn)標(biāo)準(zhǔn)盒子模型 // 全局使用字體包 html{ box-sizing: content-box; font-family: SYHTHea; } // 清除標(biāo)簽?zāi)J(rèn)間距 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; } /* 舊版本瀏覽器對(duì)H5新標(biāo)簽兼容處理 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } // 清除標(biāo)簽?zāi)J(rèn)樣式 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; } /* 全局自定義標(biāo)簽樣式 */ 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; } // 滾動(dòng)條樣式 ::-webkit-scrollbar { width: 10px; height: 10px; } /*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/ ::-webkit-scrollbar-track { border-radius: 10px; background-color: rgba($color: #ffffff, $alpha: 0.7); } /*定義滑塊 內(nèi)陰影+圓角*/ ::-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; } }
結(jié)語
最后在main.js或者app.vue中引用就可以了
import "./assets/styles/reset.scss";
以上就是Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入的詳細(xì)內(nèi)容,更多關(guān)于Vue3 reset.scss模板的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
詳解VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件
這篇文章主要介紹了VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue實(shí)現(xiàn)一拉到底的滑動(dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue簡(jiǎn)單的一拉到底的滑動(dòng)驗(yàn)證,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果
hover是css中的選擇器,用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。這篇文章主要介紹了vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果,需要的朋友可以參考下2018-09-09詳解mpvue實(shí)現(xiàn)對(duì)蘋果X安全區(qū)域的適配
這篇文章主要介紹了詳解mpvue實(shí)現(xiàn)對(duì)蘋果X安全區(qū)域的適配,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07在Vue3中使用vue-qrcode庫(kù)實(shí)現(xiàn)二維碼生成的方法
在Vue3中實(shí)現(xiàn)二維碼生成需要使用第三方庫(kù)來處理生成二維碼的邏輯,常用的庫(kù)有 qrcode和 vue-qrcode,這篇文章主要介紹了在Vue3中使用vue-qrcode庫(kù)實(shí)現(xiàn)二維碼生成,需要的朋友可以參考下2023-12-12利用vue3+ts實(shí)現(xiàn)管理后臺(tái)(增刪改查)
這篇文章主要介紹了利用vue3+ts實(shí)現(xiàn)管理后臺(tái)(增刪改查),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10