皮肤开发过程中遇到的3个问题

昨晚在公司没回去，心血来潮想做完皮肤的需求，发现晚上效率真的是挺高的。

皮肤就是一部分样式和资源。我的思路是先在原来的组件里修改对应的样式，然后把这部分样式抽出来，单独管理，同时抽取一些可以配置的变量。

经过一晚上的折腾，现在除了皮肤样式的单独打包外，都做完了。做的过程中主要遇到了3个问题：

1. vue的scoped私有模块里无法覆盖全局样式

vue自带了scoped的模块化方案，会自动在元素上添加一个随机的唯一id，然后在选择器上加上这个id，使得该样式不会影响其他模块，

这样是避免了样式影响别的地方，css modules也是类似的思路，不过css modules是改的class名字，

在改登录页的时候发现那个elementui的dropdown样式怎么也改不了，通过查看dom发现他是全局的，在body下，并不在组件里，而组件的样式被私有化了，没法覆盖全局。

于是，我在vue单文件组件里加了两个style标签，一个加scoped，一个不加scoped，这样可以在一个less里写私有样式，一个less里写一些可以覆盖全局样式的样式。

<style lang='less' src='./global-login.less'></style>
<style lang='less' src='./login.less' scoped></style>
复制代码

这样就解决了scoped里面无法覆盖全局样式的问题。

其实这也是scoped方案不完善的地方，css modules里是可以在私有模块里通过 :global(.className) 来声明全局样式的，而scoped没有处理这一点。

2. 图片的显示使用背景图还是图片标签

写样式遇到图片的时候，大多数情况下背景图片和图片标签都能解决问题，但两种方式并不都是合适的。

我觉得如果不需要用js去操作，或者本身只是辅助性的装饰或说明的图片，从意义上就是样式的一部分，应该用背景图片来做。只有当图片需要使用js去操作或者有一定的业务含义的时候才有必要用图片标签。

此外，这里要做的皮肤的切换，只是样式的切换，如果使用图片标签来显示的话，那么也就没法只通过样式来切换皮肤了。

之前的实现都是通过img标签来做的，无论从代码功能用作装饰还是有业务含义的角度或从皮肤开发只应该修改的角度都得把这里的标签改成背景图的方式。

我把img标签替换成了div标签，然后通过不同的class来区分图标。前后的装饰图片使用伪元素 + 背景图来做的。

把这些无意义的img标签抽出来之后，html代码清爽了很多，而且抽出来的icon样式复用性也很强。

.icon-suijidianming {
  background-image: url('@{iconsDirPath}/suijidianming.png');
}
.icon-dadishu {
  background-image: url('@{iconsDirPath}/dadishu.png');
}
.icon-fahongbao {
  background-image: url('@{iconsDirPath}/fahongbao.png');
}
复制代码

3.皮肤资源的管理

皮肤相关的样式和资源抽取出来之后，接下来就是如何管理这些样式和资源了。

皮肤相关的样式资源应该独立出来，于是我在assets下单独建了一个文件夹来存放皮肤相关的东西。

icons存小图标，images放一些大图片，less下面是样式，以后还可能会有字体等资源。

因为皮肤主要涉及到登录页、考勤页、顶部菜单三部分，于是我把images和less分成了这三部分，样式因为有一些是全局的，所以多了一个global.less文件。

这些页面的样式，我只抽出了一些颜色变量，通用的东西并不是很多。

在common.less里面引入variable.less，然后3个页面皮肤的less文件都引入common.less

其中@imagesDirPath和@iconsDirPath是两个资源文件的根路径，所有的图片资源的路径基于这俩变量来写，路径变动的时候也很方便的调整。

还有一些通用的mixin，主要有两个，一个是四个角的背景图片，通过mixin的方式来简化了代码

第二是icon的样式，这里使用了less 的 数组 + 循环来批量生成

scss的语法比较接近类c语法，理解容易，less的语法看着稍微奇怪一些。而且less的function需要使用mixin来模拟。感觉没有scss强大和易用。还有less的mixin并不能通过@import导入，只能每个文件都写一遍，而sass可以。

总结

皮肤开发的过程中主要遇到了 scoped样式模块化方案的坑 、 图片的存在形态 、 less的一些坑 这3个问题。

scoped样式模块化方案的坑：样式无法覆盖的问题，是因为scoped方案没有提供类似css modules在模块样式里面写全局样式的语法，只能通过分开写来解决。

图片的存在形态：装饰用的图片应该作为背景图片而存在，使用img标签除了会使得dom结构不清晰外，也不容易修改显示的内容。

less的一些坑：样式整体使用less来管理，mixin和变量还有import和逻辑控制的语法，遇到一些不方便的地方比如mixin不支持导入、没有函数的功能，只能用mixin模拟、逻辑控制语法有些怪异等。感觉不如sass强大易用。