【封装UI组件库系列】全局样式的定义与重置

封装UI组件库系列第二篇·样式

​​​​​​🌟前言

🌟定义全局样式

生成主题色和不同亮度的颜色

​编辑

中性色及其他变量 

🌟样式重置

🌟总结

---

​​​​​​​​​​​​​​🌟前言

在前端开发中，大家可能已经用过各种各样的UI组件库了，现在市面上热门的有Element-ui、Ant Design等等，这些即插即用的组件库确实大大提升了开发效率，避免了很多的重复劳动，但这些组件库再怎么完善，又怎么能满足得了我们可爱的产品经理呢​？所以工作中难免会需要开发公司内部的UI组件库，或者基于已有组件库进行二开。

【封装UI组件库系列】文章，将从0开始--》搭建项目--》封装八大经典功能组件--》打包组件库--》将组件库发布至npm--》使用自己封装的组件库。技术方面使用的是Vue3 + Vite + Sass 来完成一个模仿Element Plus的组件库。最终完成效果如下：

从零开始封装UI组件库效果演示

前一篇文章完整讲解了项目框架的搭建，在读本篇文章前建议先阅读前一篇从零封装UI组件库

🌟定义全局样式

生成主题色和不同亮度的颜色

新建src/styles/index.scss 和 vars.scss文件。

​

idnex.scss是样式的入口文件，vars.scss是负责定义全局的样式变量，例如颜色、字体大小等等。

接下来我们就模仿Element Plus定义主题色：