Vue项目中关于全局css的处理
- 步骤一:定义声明全局CSS的样式文件(common.scss)
- 步骤二:挂载到全局
- 封装一:对common.scss拆分
- 封装二:新建index.scss,对elementPlus或者element-ui样式进行覆盖
- 封装三:variable.scss
我们在写CSS的时候,会遇到大量相同的属性(比如:margin-top:10px)这种属性几乎每个vue页面都有。这个时候,我们可以把css挂载到全局上,供所有vue页面使用,同时也方便修改。
步骤一:定义声明全局CSS的样式文件(common.scss)
// 关于声明全局的CSS: 1 我们可以直接定义我们需要的。比如margin-top:10px 2 我们可以引用第三方定义好的样式(element-ui或者elementPlus) 例如: // 1.我们自己对margin的定义 $base-margin-5: 5px; $base-margin-10: 10px; $base-margin-15: 15px; $base-margin-20: 20px; $base-margin-20: 25px; // 2. 引用第三方的CSS $base-color-primary: var(--el-color-primary); $base-color-primary-light1: var(--el-color-primary-light-1); $base-border-color: var(--el-border-color);
步骤二:挂载到全局
- 在App.vue的style标签内引入
- 在main.js中引入
- 在index.html 中引入
4. 在vue.comfig.js中引入
封装一:对common.scss拆分
拆分的结果可以分为以下几类:
新建index.scss作为所有css文件的入口文件
- common.scss 文件放的是对html、div等约束的样式
- element-reset.scss文件放的是对element-ui样式的修改(修改el-menu等样式)
- reset.scss文件放的是 normalize.css
- variable.scss文件放的是上面说的那些公共的样式
封装二:新建index.scss,对elementPlus或者element-ui样式进行覆盖
// 比如:覆盖elementPlus的主题背景 @forward 'element-plus/theme-chalk/src/common/var.scss' with ( $colors: ( 'primary': ( 'base': #990066, ) ) ); @use "element-plus/theme-chalk/src/message.scss" as *; @use "element-plus/theme-chalk/src/message-box.scss" as *;
封装三:variable.scss
- 在App.vue的style标签内引入
猜你喜欢
- 8天前(瑞虎7plus2021款)重塑10万级SUV价值标杆,全新一代瑞虎7PLUS冠军版给你惊喜
- 8天前(甘肃文旅项目)甘肃省文旅产业链招商引资推介会在天水成功举办
- 8天前(甘肃文化旅游宣传片)甘肃文旅推介走进重庆
- 8天前(星级饭店的发展困境)星级饭店转型之路:从市场逻辑到行业实践的深度探索
- 8天前(美诺酒店集团旗下臻选品牌m collection)美诺酒店集团启动盛橡品牌战略焕新 开启全球扩张新篇章
- 8天前(大连aaaaa景区)辽宁大连A级旅游景区应急救护水平整体跃升
- 8天前(“百场黄梅唱响百家景区”示范演出活动在黄山风景区举行)“百场黄梅唱响百家景区”示范演出活动在黄山风景区举行
- 8天前(内蒙古交通旅游图)内蒙古着力提升交通与旅游服务水平
- 8天前(新西兰登陆《我的世界》!全球首个目的地游戏模组震撼上线)新西兰登陆《我的世界》!全球首个目的地游戏模组震撼上线
- 8天前(泸沽湖大酒店地址)泸沽湖岚岳酒店盛大开业|以摩梭文化为魂,打造高端度假新地标
网友评论
- 搜索
- 最新文章
- (2020广州车展哈弗)你的猛龙 独一无二 哈弗猛龙广州车展闪耀登场
- (哈弗新能源suv2019款)智能科技颠覆出行体验 哈弗重塑新能源越野SUV价值认知
- (2021款全新哈弗h5自动四驱报价)新哈弗H5再赴保障之旅,无惧冰雪护航哈弗全民电四驱挑战赛
- (海南航空现况怎样)用一场直播找到市场扩张新渠道,海南航空做对了什么?
- (visa jcb 日本)优惠面面俱到 JCB信用卡邀您畅玩日本冰雪季
- (第三届“堡里有年味·回村过大年”民俗花灯会活动)第三届“堡里有年味·回村过大年”民俗花灯会活动
- (展示非遗魅力 长安启源助力铜梁龙舞出征)展示非遗魅力 长安启源助力铜梁龙舞出征
- (阿斯塔纳航空公司)阿斯塔纳航空机队飞机数量增至50架
- (北京香港航班动态查询)香港快运航空北京大兴新航线今日首航
- (我在港航“呵护”飞机 每一次安全着陆就是最好的荣誉)我在港航“呵护”飞机 每一次安全着陆就是最好的荣誉
- 热门文章