关于组件库的主题定制

96
烈风裘
2017.12.05 20:17 字数 902

简述

这篇博文主要讲解前端组件库主题定制相关内容,只限于Scss/Sass、Less两种样式预处理语言,这两种语言能够简化CSS的工作流,使得开发者维护开发样式更得心应手,便于应对复杂的样式需求。

对组件封装性好的库而我比较熟悉的有两个,React和Vue,这里我对这两个前端库封装的组件进行说明,涉及到的组件库包括:element-uiiviewantdionic

主题定制分类

组件库的编写者一般都会为开发者设计一些主题样式更换方案,主要是这两类:

  1. 复写全部主题样式,一次性引入
  2. 通过预处理器注入主题变量

这里对这两类进行说明。

1. 复写全部主题样式

SCSS

这个在PC端比较常见,比如:element-ui中的第二个方案,虽然说是改变SCSS变量,但还是复写了全部主题样式。项目初始时加载全部组件的样式,这个场景在PC端并没有太大的问题。但是从性能优化的角度,并不推荐。

/* 改变主题色变量 */
$--color-primary: teal;

/* 改变 icon 字体路径变量,必需 */
$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';

@import "../node_modules/element-ui/packages/theme-chalk/src/index";
Less

此外,iview使用Less作为预编译语言,给出的推荐主题定制方案全部都是复写全部主题样式的解决办法,和element-ui一致。

@import '~iview/src/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #8c0776;

因为Less和Scss变量作用域定义不一样,上面两个@import写法会有些不同,但都是一个意思。

需要注意的是,这种方式已经载入了所有组件的样式,不需要也无法和按需加载插件babel-plugin-importbabel-plugin-component的 style 属性一起使用。

2. 通过预处理器注入主题变量

Less

这里值得一提的是Antd组件库,这是我强烈推荐使用的组件库。它推荐使用修改主题变量的方式定制主题,使用了Less的 modifyVars 的方式来覆盖主题变量。比如将主题挂在package.json上:

"theme": {
  "primary-color": "#1DA57A",
},

这个方案之前在我做的项目中有使用,自己根据实现原理写逻辑代码不是很难。

问题点是:每次修改变量都需要重启dev服务,刚开始对开发者不是很友好。当然,主题修改好后,并不是经常变动,这里可以原谅。

SCSS

其实SCSS也能通过只修改主题变量的方式更改主题,这个是在读IONIC源码时发现的,源码位置。它是通过node-sassoptions.data的方式覆盖主题。比如传入如下字符串:

'@charset "UTF-8"; @import "/xxx/xxx/project/to/theme/path/variables.scss";'

构建时启用你定义的样式变量。我这里简单写了一个变量获取方式,代码

注意,这里需要你样式组件中的所有变量后都带上!default修饰,将生效等级降为最低。这里没有Less那样需要重启dev-server的问题,通过webpack构建,修改了引入的主题文件,项目将自动重构,较为方便。

总结

建议通过修改变量的方式来修改主题我认为是比较靠谱的,当主题与公司UI不符时,再使用样式复写的方式处理。

个人还是比较喜欢SCSS的处理方式。

总结
Web note ad 1