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

相关推荐
吴声子夜歌几秒前
JavaScript——DOM与事件
开发语言·javascript·ecmascript
紫_龙2 分钟前
最新版vue3+TypeScript开发入门到实战教程之路由详解
javascript·typescript·智能路由器
陈天伟教授2 分钟前
人工智能应用- AI 增强显微镜:01.显微镜的瓶颈
前端·人工智能·安全·xss·csrf
Mintopia4 分钟前
Pencil.dev 设计 → 规格 → 代码 → 校验
前端·人工智能
TON_G-T5 分钟前
深入学习webpack-tapable
前端·学习·webpack
工边页字9 分钟前
AI产品面试题:什么是 Function Calling?
前端·人工智能·后端
Mintopia9 分钟前
一份合格的软件 VI 文字文档简单版
前端·css·人工智能
四千岁9 分钟前
如何精准统计 Token 消耗,使用对账工具控制成本?
前端·javascript·vue.js
开心码农1号14 分钟前
前端web页面请求后端服务时,接口出现50s初始连接超时
前端
jiayong2319 分钟前
0基础学习VUE3 第 3 课:任务页怎么把列表、筛选、表单、弹窗串起来
前端·javascript·学习