vue3 element-plus组件库生成自定义颜色

最新推荐文章于 2024-11-23 12:27:48 发布

原创最新推荐文章于 2024-11-23 12:27:48 发布 · 768 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js

文档截图
在这里插入图片描述
源码位置

在这个文件里面写自定义的颜色

$colors: map.deep-merge(
  (
    'white': #ffffff,
    'black': #000000,
    'primary': (
      'base': #348f6c,
    ),
    'success': (
      'base': #348f6c,
    ),
    'warning': (
      'base': #e5913e,
    ),
    'danger': (
      'base': #d35e58,
    ),
    'error': (
      'base': #f56c6c,
    ),
    'info': (
      'base': #2e5cc7,
    ),
  ),

执行 pnpm run build:theme 命令后，生成的dist文件里面index.css文件，可以看到已经生成了我们想要的自定义的颜色。将这个文件拿到我们的组件库内去使用，使用@user 'xx.scss’进行引入，就可以使用我们配置的主题色。相比针对单个组件进行样式的调整，工作量直接少了一大半。
在这里插入图片描述