vue3如何写全局样式

1.新建全局样式文件kanno.scss

在src/assets/style文件夹中新建kanno.scss

css 复制代码
.is-required {
    .el-input__wrapper {
        box-sizing: border-box;
        background: rgba(255, 196, 59, 0.1);
    }

    .el-input__wrapper:hover {
        // border: 1px solid #3592FF;
    }
}

.kanno{
    width: 200px;
    height: 200px;
    color: rgb(99, 18, 250);
    background-color: rgb(38, 226, 0);
}

2.全局引用

在mian.js文件中引入,import "@/assets/styles//kanno.scss";

3.使用全局样式

html 复制代码
<div class="kanno">kanno</div>

4.说明

也可以直接在main.css文件中直接引入kanno.scss

相关推荐
Monly215 分钟前
Vue:下拉框多选影响行高
前端·javascript·vue.js
是罐装可乐7 分钟前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map
小桥风满袖13 分钟前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
代码的余温24 分钟前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端
一涯29 分钟前
日常小常识记录
前端
那一抹阳光多灿烂35 分钟前
CSS 编码规范
前端·css
degree52037 分钟前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
૮・ﻌ・39 分钟前
CSS高级技巧---精灵图、字体图标、布局技巧
前端·css
昔人'39 分钟前
纯`css`固定标题并在滚动时为其添加动画
前端·css
超人不会飛41 分钟前
Vue markdown组件 | 流式 | 大模型应用
前端·javascript·github