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

相关推荐
恋猫de小郭5 分钟前
Flitz ,一个把 Flutter 玩成热插拔 Preview 的有趣项目,不错的思路
android·前端·flutter
闭包不眠7 分钟前
Word转HTML后体积不对,裁掉的截图原图还在
前端·图像处理·人工智能·计算机视觉·html·word
言乐613 分钟前
PythonLOLM自动生成复盘报告模型
开发语言·前端·数据库·人工智能·python
tryCbest25 分钟前
第二篇:CSS3 全部知识点全解 + 项目样式实现
前端·css·css3
一木 之林28 分钟前
Agent智能体学习总结:从一次调用到模型自主规划、工具调用与 ReAct 循环的项目实战-6/6
前端·人工智能·学习·react.js
程序员大阳28 分钟前
副队长CSS教程(36)–移动布局与响应式
前端·css·响应式·媒体查询·移动布局
程序员Sunday32 分钟前
React 的 useEffect 怎么工作?依赖数组、清理函数和重复执行如何理解?
前端·javascript
lank_M42 分钟前
Word裁剪图片转HTML走样,该在渲染层修还是入口修
前端·图像处理·人工智能·计算机视觉·html·word
IT_陈寒43 分钟前
深入理解Redis:核心原理与最佳实践
前端·人工智能·后端
Zhu7581 小时前
开源项目-Sablewisp-轻量、现代的 Chrome 书签管理扩展(Manifest V3)
前端·chrome