简述
这篇博文主要讲解前端组件库主题定制相关内容,只限于Scss/Sass、Less两种样式预处理语言,这两种语言能够简化CSS的工作流,使得开发者维护开发样式更得心应手,便于应对复杂的样式需求。
对组件封装性好的库而我比较熟悉的有两个,React和Vue,这里我对这两个前端库封装的组件进行说明,涉及到的组件库包括:element-ui、iview、antd、ionic。
主题定制分类
组件库的编写者一般都会为开发者设计一些主题样式更换方案,主要是这两类:
- 复写全部主题样式,一次性引入
- 通过预处理器注入主题变量
这里对这两类进行说明。
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-import或babel-plugin-component的 style 属性一起使用。
2. 通过预处理器注入主题变量
Less
这里值得一提的是Antd组件库,这是我强烈推荐使用的组件库。它推荐使用修改主题变量的方式定制主题,使用了Less的 modifyVars 的方式来覆盖主题变量。比如将主题挂在package.json
上:
"theme": {
"primary-color": "#1DA57A",
},
这个方案之前在我做的项目中有使用,自己根据实现原理写逻辑代码不是很难。
问题点是:每次修改变量都需要重启dev服务,刚开始对开发者不是很友好。当然,主题修改好后,并不是经常变动,这里可以原谅。
SCSS
其实SCSS也能通过只修改主题变量的方式更改主题,这个是在读IONIC源码时发现的,源码位置。它是通过node-sass的options.data的方式覆盖主题。比如传入如下字符串:
'@charset "UTF-8"; @import "/xxx/xxx/project/to/theme/path/variables.scss";'
构建时启用你定义的样式变量。我这里简单写了一个变量获取方式,代码。
注意,这里需要你样式组件中的所有变量后都带上!default
修饰,将生效等级降为最低。这里没有Less那样需要重启dev-server的问题,通过webpack构建,修改了引入的主题文件,项目将自动重构,较为方便。
总结
建议通过修改变量的方式来修改主题我认为是比较靠谱的,当主题与公司UI不符时,再使用样式复写的方式处理。
个人还是比较喜欢SCSS的处理方式。