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

相关推荐
Sherlock Ma6 分钟前
CSS零基础入门笔记:狂神版
前端·css·程序人生·跳槽·css3·学习方法·改行学it
浩哲Zhe16 分钟前
Java Web 之 Tomcat 100问
java·前端·tomcat
利刃之灵33 分钟前
02-HTML结构
前端·html
小纯洁w34 分钟前
Vue和React项目中,统一监听页面错误需要结合框架提供的错误处理机制与JavaScript原生方法
javascript·vue.js·react.js
Hopebearer_39 分钟前
理解 React 的 useEffect
前端·javascript·react.js·前端框架
excel2 小时前
webpack 检出图 第 十 节 lib/ChunkGraph.js
前端
好_快2 小时前
Lodash源码阅读-parent
前端·javascript·源码阅读
shmily ....2 小时前
前端实战:基于 Vue 与 QRCode 库实现动态二维码合成与下载功能
前端·vue.js
excel2 小时前
webpack 检出图 第 九 节 lib/ChunkGraph.js
前端
好_快2 小时前
Lodash源码阅读-pullAllWith
前端·javascript·源码阅读