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

相关推荐
Aliex_git几秒前
性能优化 - 渲染优化
前端·javascript·笔记·学习·性能优化·html
Jenlybein3 分钟前
Git 仓库过滤敏感信息,通过配置 clean/smudge 过滤器的方式
前端·后端·github
千寻girling15 分钟前
面试官 : “ 说一下 Vue 的 8 个生命周期钩子都做了什么 ? ”
前端·vue.js·面试
Heo16 分钟前
Vue3 应用实例创建及页面渲染底层原理
前端·javascript·面试
C_心欲无痕20 分钟前
nodejs - express:流行的 Web 应用框架
前端·node.js·express
sophie旭21 分钟前
webpack异步加载原理梳理解构
前端·javascript·webpack
小小荧22 分钟前
Vue 原生渲染真要来了?Lynx引擎首次跑通Vue
前端·javascript
千寻girling31 分钟前
面试官 : ” 说一下 Vue 中的 setup 中的 props 和 context “
前端·vue.js·面试
KLW7532 分钟前
vue中 v-cloak指令
前端·javascript·vue.js
0思必得039 分钟前
[Web自动化] Requests模块请求参数
运维·前端·python·自动化·html