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

相关推荐
hzw05109 分钟前
使用pnpm管理前端项目依赖
前端
小柚净静13 分钟前
npm install vue-router 无法解析
javascript·vue.js·npm
风清扬雨24 分钟前
Vue3中v-model的超详细教程
前端·javascript·vue.js
高志小鹏鹏25 分钟前
掘金是不懂技术吗,为什么一直用轮询调接口?
前端·websocket·rocketmq
八了个戒28 分钟前
「JavaScript深入」一文说明白JS的执行上下文与作用域
前端·javascript
高志小鹏鹏29 分钟前
Tailwind CSS都更新到4.0了,你还在抵触吗?
前端·css·postcss
qingyun9891 小时前
封装AJAX(带详细注释)
前端·ajax·okhttp
鱼樱前端1 小时前
前端工程化面试题大全也许总有你遇到的一题~
前端·javascript·程序员
小华同学ai1 小时前
331K star!福利来啦,搞定所有API开发需求,这个开源神器绝了!
前端·后端·github
记得坚持1 小时前
@monaco-editor/loader实现Monaco Editor编辑器
javascript·vue.js