P2-Vue3后台管理系统-配置scss全局变量

1.概述

将项目中重复使用的内容配置成全局变量，当需要改变内容时候只需要改变全局变量，不需要在代码中修改。

2.配置scss全局变量

2.1.新建scss文件夹

scss文件夹管理所有scss文件，全局变量都配置到scss文件中。

2.2.新建第一个全局配置文件

在scss文件夹下新建 _variable.scss ⽂件，并配置全局变量。

引入样式重置文件
样式重置文件内容

html, body, div, span, applet, object, iframe,
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;font-size: 100%;font: inherit;vertical-align: baseline;box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
a, a:hover{color: inherit;text-decoration: none;
}
table {border-collapse: collapse;border-spacing: 0;
}
html, body {width: 100%;height: 100%;background-color: #f5f5f5;font-family: 'PingFangSC-Light', 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', 'Arial', 'sans-serif';
}// 公共样式
.fl{float: left;
}
.fr{float: right;.button-group-item{padding-left: 3px;}
}
//清除浮动
.clearfix{zoom:1;&:after{display:block;clear:both;content:"";visibility: hidden;height:0;}
}

2.3._variable.scss ⽂件引入到项目

在vue.config.js文件中配置css内容，将_variable.scss ⽂件引入到项目中

module.exports = {devServer: {// 配置项目端口port: 8868,// 启动项目自动打开浏览器open: true},css: {loaderOptions: {sass: {prependData: `@import "@/assets/scss/_variable.scss";`}}}
}

2.4.main.js引入reset.scss文件

P2-Vue3后台管理系统-配置scss全局变量相关推荐

vue3后台管理系统
vue3后台管理系统 vite构建vue3项目项目中其他需求的引入 1. element-plus引入 2. vue3引入路由 3. element-plus图标的引入和使用静态引入图标动态引入 ...
vue3后台管理系统（https://github.com/noob-Jp/my-admin-vue3）
# my-admin-vue3 线上预览地址:vue3后台管理系统本项目是我第一次写vue3,vue2已经学了很长时间,早就想开始接触vue3,通过b站和github上项目的介绍我了解到好多成熟的v ...
开箱即用，这些 Vue3 后台管理系统模板绝对让你爽歪歪！
原文链接:Vue3 后台管理系统模板推荐. 之前写了一篇关于 Vue2 的后台管理系统模板的推荐,详情请见 Vue后台管理系统模板推荐. Vue3 在今年2月份已成为新的默认版本,本文收集了一些 Vu ...
Vue3后台管理系统模板推荐
文章目录 @[TOC](文章目录) 1.Vue-Vben-Admin 2.vue-manage-system 1.Vue-Vben-Admin Vue-Vben-Admin(github上的标星数为1 ...
Vue3后台管理系统（四）SVG图标
目录一.安装 vite-plugin-svg-icons 二.创建图标文件夹三.main.ts 引入注册脚本四.vite.config.ts 插件配置五.TypeScript支持六.组件封装 ...
用 Vite+Vue3+Ts 搭建通用后台管理系统
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cl ...
用vite+Vue3+ts搭建通用后台管理系统
点击上方关注前端技术江湖,一起学习,天天进步通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cli) vue-cli基于webpack封装,生态非常强大,可 ...
一套通用的VUE后台管理系统方案（vite+Vue3+ts）
通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cli) vue-cli基于webpack封装,生态非常强大,可配置性也非常高,几乎能够满足前端工程化的所有要求 ...
基于angular4+ng-bootstrap+bootstrap+scss的后台管理系统界面
描述在angular2刚才发布的不久,很多人不懂得怎么应用,直到现在也很多人不懂怎么用, 于是我在余业时间做了这么一个后台管理系统页面,希望对大家有帮助!! 从我个人的感觉来说,angular2语法 ...

P2-Vue3后台管理系统-配置scss全局变量

P2-Vue3后台管理系统-配置scss全局变量

1.概述

2.配置scss全局变量

2.1.新建scss文件夹

2.2.新建第一个全局配置文件

2.3._variable.scss ⽂件引入到项目

2.4.main.js引入reset.scss文件

P2-Vue3后台管理系统-配置scss全局变量相关推荐

最新文章

热门文章