vue3-elementuiPlus覆盖主题颜色失效2022/7/20am

xumengxia—xu

已于 2023-02-17 09:53:05 修改

阅读量2k

点赞数 1

分类专栏：工作2022年5月，记录生活的每一天文章标签：前端 javascript css

于 2022-07-20 08:49:46 首次发布

本文链接：https://blog.csdn.net/qq_56514785/article/details/125884773

版权

工作2022年5月，记录生活的每一天专栏收录该内容

37 篇文章 1 订阅

订阅专栏

项目根目录\src\assets\styles\element\index.scss


/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': red,
    ),
  ),
);

// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
@use "element-plus/theme-chalk/src/index.scss" as *;

项目根目录\src\main.ts （入口文件）

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/styles/element/index.scss'  重点：必须写在前面
import ElementPlus from 'element-plus'  重点：在后面 否则失败
import * as ElIcons from '@element-plus/icons-vue'
// import 'element-plus/theme-chalk/index.css'

const app = createApp(App)
for (const name in ElIcons) {
  app.component(name, (ElIcons as any)[name])
}
app.use(store).use(router).use(ElementPlus).mount('#app')

第二种方法：

项目根目录\src\App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  document.body.style.setProperty('--el-color-primary', '#56AB2F') 重点：直接重置颜色
  document.body.style.setProperty('--el-color-primary-light-9', '#F5FBF0')
  document.body.style.setProperty('--el-color-primary-light-3', '#95d475')
})
</script>