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

相关推荐
一只小bit6 分钟前
Qt 快速开始:安装配置并创建简单标签展示
开发语言·前端·c++·qt·cpp
加蓓努力我先飞11 分钟前
a-第一部分-基础篇-前端面试题总结
前端
青莲84316 分钟前
Android Jetpack - 3 LiveData
android·前端
Syron19 分钟前
ScaleSlider 组件实现
javascript
xhxxx22 分钟前
深入执行上下文:JavaScript 中 this 的底层绑定机制
javascript
狗哥哥24 分钟前
企业级 Vue 3 基础数据管理方案:从混乱到统一
前端
前端涂涂36 分钟前
哈希指针,什么是区块链,genesis blcok,most recent block,tamper-evident log,merkle tree,binar
前端
尽兴-43 分钟前
问题记录:数据库字段 `CHAR(n)` 导致前端返回值带空格的排查与修复
前端·数据库·mysql·oracle·达梦·varchar·char
DsirNg1 小时前
Vue 3:我在真实项目中如何用事件委托
前端·javascript·vue.js
克喵的水银蛇1 小时前
Flutter 适配实战:屏幕适配 + 暗黑模式 + 多语言
前端·javascript·flutter