vue3中修改element plus 主题色

  1. 使用 :root 方式设置变量进行覆盖
  • 文件夹 styles 下新建一个 element-variarbles.scss文件
    :root {
    --el-color-primary: red;
    }

  • main 文件中引入
    import 'element-plus/dist/index.css'
    import '@/styles/element-variables.scss'

  1. 使用 scss 覆盖
    即使用新写的样式,覆盖原有的样式,合并为一个scss文件,引入使用
  • 文件夹 styles 下新建一个 element-variarbles.scss文件
    @forward 'element-plus/theme-chalk/src/common/var.scss' with (
    $colors: (
    'primary': (
    'base': red,
    ),
    "success": (
    "base": #67C23A,
    ),
    ),
    );
    @use "element-plus/theme-chalk/src/index.scss" as *; // 如果想要引入所有的样式

  • vue.config.ts 中引入
    css: {
    loaderOptions: {
    sass: {
    additionalData: @use "@/styles/element-variables.scss" as *;
    },
    },
    },

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容