关于项目主题换肤的一些方案

前言

前端换肤技术实施的核心是替换项目中定义的各种颜色值，一般来讲，需要将这些所有的颜色值整理在一个文件中，以便于统一管理、统一配色。所以在实际开发过程中，为页面各个模块设置对应的颜色值时，都需要在这个文件中获取。Es6的模块化提供了非常友好的文件读取方式，我们可以结合webpack编译工具来编译不同颜色文件的css样式，以实现一种统一的换肤方案应用在公司的不同项目中。

本文主要介绍如何利用 webpack 结合第三方框架去构建一个换肤的方案，首先介绍从页面到模块的不同颜色层级的定义，然后重点会介绍 webpack 的配置和优化，最后根据Vue 生态系统结合第三方组件进行验证。

1. 页面组成与颜色规范

前端页面主要分为工具栏，导航栏，菜单栏，与页面主体部分，因为涉及到不同项目中采用的css预处理语言样式不同，所以需要统一制定一个换肤的主题规范，从而满足不同项目的主题切换工作。 从颜色范围来讲，主题颜色主要分为浅色系 和深色系 ；从颜色区间来讲，主题颜色应该分为多种色值来界定不同层级的颜色；从细节来讲，页面的主题颜色应该包含但不仅限于以下部分：主色、强调色、背景颜色、文本颜色。

从设计的