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

相关推荐
终端鹿8 分钟前
Vue2 迁移 Vue3 避坑指南
前端·javascript·vue.js
进击的尘埃12 分钟前
Signals 跨框架收敛:TC39 提案、Solid、Angular、Preact 的实现差异与调度策略对比
javascript
程序员陆业聪13 分钟前
工程师的瓶颈,已经不是代码了
前端
毛骗导演29 分钟前
@tencent-weixin/openclaw-weixin 源码ContextToken 持久化改造:实现微信自定义消息发送能力
前端·架构
爱丽_29 分钟前
Pinia 状态管理:模块化、持久化与“权限联动”落地
java·前端·spring
进击的尘埃38 分钟前
从多仓到 Monorepo 的渐进式迁移:Git 历史保留、依赖收敛与缓存调优
javascript
SuperEugene1 小时前
TypeScript+Vue 实战:告别 any 滥用,统一接口 / Props / 表单类型,实现类型安全|编码语法规范篇
开发语言·前端·javascript·vue.js·安全·typescript
我是永恒1 小时前
上架一个跨境工具导航网站
前端
电子羊1 小时前
Spec 编程工作流文档
前端
GISer_Jing2 小时前
从CLI到GUI桌面应用——前端工程化进阶之路
前端·人工智能·aigc·交互