vue3+ElementPlus之CSS深度访问选择器

---

前言

这段时间开始上手vue3，个中滋味不足为外人道也。由option API 转为 composition API，以及TS，怎么感觉那么别扭呢。当然vue3和vue2的区别不在本文讨论之列，有兴趣的可以去官网仔细学习研究一下官方文档

回归正题：下文我们来解决在vue3下，使用element plus后所遇到问题:
1、css重置无效问题
2、element plus icon图标引用无效问题

---

一、demo环境

vue：3.2.25
vue-router：4
element-plus：2.0.1
element-plus/icons-vue：1.0.0
vite：2.7.2

二、问题1-重置element plus css无效

说明：本人最开始也查了一些资料，发现的解决方法大概有以下两种：

1. 去除style的 scoped, 使其变成全局样式
2. 单独创建css文件，然后在import 导入

这两种方式，要么会污染全局css；要么就是在后期会让css变得臃肿且难麻烦。
结合上述方法，再加上本人的一次次尝试，可以使用以下方式解决css的生效目标，大家可以参考

// 项目使用的是scss
<template>
	<el-container class="layout-container">
        <el-header>
			<el-menu                                     
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"                
                >
                    <el-sub-menu index="1" popper-class="head-sub-menu" :popper-append-to-body="false">
                        <template #title>menu1</template>
                        <el-menu-item index="1-1">menu1-1</el-menu-item>
                        <el-menu-item index="1-2">menu1-2</el-menu-item>
                    </el-sub-menu>
                </el-menu>
        </el-header>
    </el-container>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>

// 利用element plus popper-class,修改子菜单弹出框的边框、以及最小宽度且尽在当前组件内生效
// 注意: 之前使用的 /deep/ 会在本环境内报错， ::v-deep也会出现警告错误

:deep(.head-sub-menu) {
	border: 1px solid red !important;
	.el-menu--popup {
		min-width: 100px;
	}
}
</style>

三、问题2-引入icon无效

说明：element-plus的 Font Icon被弃用，转为 SVG Icon。有以下两种方式：按需引入 全局引入

1、element-plus Icon需要另外安装

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

2、按需引入

<template>
	<div>
		<el-icon color="#409EFC" size="small">  
			<Search />
		</el-icon>
	</div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons'
</script>

<style lang="scss" scoped></style>

3、全局引入

// main.js 全局注册

import * as Icons from '@element-plus/icons-vue'

const app = createApp(App)
// 注册ICON全局组件
Object.keys(Icons).forEach(key => {
    app.component(key, Icons[key])
})
app.use(router).use(ElementPlus, {locale: zhCn})
app.mount('#app')

// 组件内使用
<template>
	<div>
		 <el-input placeholder="搜索..." @focus="searchFocus">
              <template #suffix>
                  <el-icon><search /></el-icon>
              </template>
          </el-input>
	</div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped></style>