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

相关推荐
yannick_liu1 分钟前
nuxt4 + nuxt-swiper实现官网全屏播放
前端
苏打水com4 分钟前
JS基础事件处理与CSS常用属性全解析(附实战示例)
前端
W.Y.B.G6 分钟前
JavaScript 计算闰年方法
开发语言·前端·javascript
渣哥14 分钟前
你以为只是名字不同?Spring 三大注解的真正差别曝光
javascript·后端·面试
小六路14 分钟前
可以横跨时间轴,分类显示的事件
前端·javascript·vue.js
SuperherRo16 分钟前
JS逆向-安全辅助项目&JSRpc远程调用&Burp插件autoDecode&浏览器拓展V_Jstools(上)
javascript·安全·项目
比老马还六24 分钟前
Blockly文件积木开发
前端
Nayana32 分钟前
Element-Plus源码分析--form组件
前端
Bellafu66633 分钟前
selenium对每种前端控件的操作,python举例
前端·python·selenium
littleboyck1 小时前
VSCode 全自动调试Vue/React项目
前端·visual studio code