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

相关推荐
Lan.W22 分钟前
element UI + vue2 + html实现堆叠条形图 - 横向分段器
前端·ui·html
FAQEW24 分钟前
若依(RuoYi-Vue)单体架构实战手册:自定义业务模块全流程开发指南
前端·后端·架构·若依二开
神算大模型APi--天枢64632 分钟前
合规与高效兼得:国产全栈架构赋能行业大模型定制,从教育到工业的轻量化落地
大数据·前端·人工智能·架构·硬件架构
千寻girling37 分钟前
马上元旦节了,手写一个《前端脚手架》庆祝一下 !
前端
嚣张丶小麦兜1 小时前
认识vite
前端·javascript·vue.js
玲小珑2 小时前
请求 ID 跟踪模式:解决异步请求竞态条件
前端
开心_开心急了2 小时前
AI+PySide6实现自定义窗口标题栏目(titleBar)
前端
开心_开心急了2 小时前
Ai加Flutter实现自定义标题栏(appBar)
前端·flutter
布列瑟农的星空2 小时前
SSE与流式传输(Streamable HTTP)
前端·后端
GISer_Jing2 小时前
跨境营销前端AI应用业务领域
前端·人工智能·aigc