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

相关推荐
i听风逝夜3 分钟前
Web 3D地球实时统计访问来源
前端·后端
iMonster7 分钟前
React 组件的组合模式之道 (Composition Pattern)
前端
呐呐呐呐呢15 分钟前
antd渐变色边框按钮
前端
元直数字电路验证35 分钟前
Jakarta EE Web 聊天室技术梳理
前端
wadesir38 分钟前
Nginx配置文件CPU优化(从零开始提升Web服务器性能)
服务器·前端·nginx
牧码岛38 分钟前
Web前端之canvas实现图片融合与清晰度介绍、合并
前端·javascript·css·html·web·canvas·web前端
灵犀坠40 分钟前
前端面试八股复习心得
开发语言·前端·javascript
9***Y4841 分钟前
前端动画性能优化
前端
网络点点滴43 分钟前
Vue3嵌套路由
前端·javascript·vue.js
牧码岛1 小时前
Web前端之Vue+Element打印时输入值没有及时更新dom的问题
前端·javascript·html·web·web前端