首页 前端知识 vue3.2 vite typescript element-plus自定义主题颜色,全局修改组件样式

vue3.2 vite typescript element-plus自定义主题颜色,全局修改组件样式

2024-06-11 09:06:14 前端知识 前端哥 250 366 我要收藏

vite.config.ts

……

export default defineConfig(({ command}) => {
  return {
    resolve: {
      alias: {
        "@": resolve(__dirname, "src")
      },
      extensions: [".js", ".json", ".ts"], // 导入时想要省略的后缀名,.vue等自定义文件不建议省略,影响IDE识别和提示
    },
    
    // 修改element主题色
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/css/elementplus.scss" as *;`,
        },
      },
    },
    
    plugins: [
      ……
    ],
  };
});

src/assets/css/elementplus.scss

文件名称和目录,这个可以自定义,和上面vite配置对上就行。

  • 全局主题色,变量从node_modules,element-plus/theme-chalk/src/common/var.scss这个里边找
  • 组件样式覆盖,变量从chrome调试工具里边找,var()包裹的,按照那个来
@use "sass:map";
//全局主题色
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #005BAD,
    ),
    'success': (
      'base': #00A85A,
    ),
    'warning': (
      'base': #F6AD55,
    ),
    'danger': (
      'base': #DC3C3A,
    ),
  )
);
//修改组件样式变量
:root{
  --el-box-shadow-light:0px 0px 8px 0px rgba(0,91,173,0.22);
  
  .el-card{
    --el-card-border-radius:8px;
  }
  .el-table{
    --el-table-header-bg-color:#0E6EB8;
    --el-table-header-text-color:#FFFFFF;
  }
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/11941.html
标签
评论
发布的文章

HTML5-本地存储浅谈

2024-06-19 08:06:18

JS实现倒计时功能

2024-06-19 08:06:34

HTML黑客帝国字母雨

2024-06-11 09:06:45

每天一篇之HTML(2)

2024-06-19 08:06:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!