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

相关推荐
Spider_Man1 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia6 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李8 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
Code季风9 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录10 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia10 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽12 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥13 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob023416 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder22 分钟前
Vite Devtools 要发布了!期待
前端·面试·github