定制主题

在快速开始章节我们提到过“多文件半构建版”可以支持主题定制。因为这个版本样式文件使用了源码stylus,所以我们可以引入主题文件在构建时生成自定义主题的css样式。

得益于stylus-loaderimport配置,我们可以指定一个主题文件,它会在编译每一个stylus文件时引入它。

配置webpack.config.js

const path = require('path');

// 其他配置参见快速开始章节,这里略去
...
{
    loader: 'stylus-loader',
    options: {
        'include css': true,
        'resolve url': true,
        // 引入自定义主题文件mytheme/index.styl
        import: path.resolve(__dirname, 'styles/mytheme/index.styl')
    }
}

kpc内置了一个ksyun的主题,我们只需要将import指向它即可import: '~kpc/styles/themes/ksyun/index.styl'

定义主题

修改变量

kpc几乎将所有的可能变更的属性都提取成了变量,组件对应的变量命名规则为:使用小写字母${组件名}-{类型}-{属性名}的方式命名。例如:$btn-primary-color := #fff $dialog-width := unit(670 / 14, rem)等。

通过修改import进来的主题文件中的变量,如上面import的文件styles/themes/index.styl,就可以自定义自己的主题。

以上面提到的styles/mytheme/index.styl文件为例:

// 修改主色调
$primary-color := #289af4 

/**
 * btn
 */
// 修改button组件的padding值
$btn-padding := 0 30px

赋值符号:=是stylus的语法,意思是当变量被赋值过时,则忽略本次赋值。所以我们可以通过import提前加载一个变量定义文件,来让kpc中的默认定义失效

添加新样式

并非所有的样式修改都可以通过修改变量来实现,因为变量只能重新定义已有的样式的值,但不能新增样式。例如:Button组件的type只内置了default | primary | warning | danger | none几种样式,如果我们想向主题中添加一种dashed虚边框的按钮,则不能通过修改变量得到。也许你会想,我们可以在全局样式中,将dashed按钮的样式定义好,然后在需要该样式的地方添加相应类名即可。是的,这样的确能实现,但弊端是不能按需加载,因为在全局样式中,即使我不使用Button组件,该样式也会加载。而如果将该样式文件单独定义,然后在用到Button的地方,再手动加载它,又显得麻烦。

其实kpc加载每一个组件的样式时,会检测是否存在对应的主题文件,如果存在就会默认加载它。通过该机制,我们可以很方便地在主题中添加样式。

以上文提到的dashed按钮为例:

指定$theme-dir

首先我们需要在主题文件styles/mytheme/index.styl中指定$theme-dir变量,来告诉kpc主题文件的位置。遗憾的是,stylus中并没有类似__dirname的全局变量,不过我们可以通过stylus的use方法来实现。

  1. styles/mytheme/下新建js文件dirname.js,定义__dirname方法
const path = require('path');

module.exports = function() {
    return function(style) {
        style.define('__dirname', function() {
            return path.dirname(style.nodes.filename);
        });
    };
};
  1. 在主题文件styles/mytheme/index.styluse上述dirname.js,并定义$theme-dir
use('./dirname.js')
$theme-dir := __dirname()

// 以下为变量定义
...

此时$theme-dir指向styles/mytheme目录,kpc会在该目录下检测主题文件。

kpc已经定义好了stylus的__dirname方法,你也可以直接使用use('../../node_modules/kpc/styles/function.js')。具体加载路径根据你的主题文件路径而定

  1. styles/mytheme/下新建button.styl文件(文件名必须与组件名对应),添加k-dashed 样式定义
.k-dashed
    border 1px dashed #eee 

此时,当我们加载Button组件时,上述样式也会加载进来。真正做到按需加载,并且无需额外插件支持。

发布主题

我们可以将定义好的主题文件,发布到npm供他人使用。使用者只需要改变stylus-loader中的import配置,指向你发布的主题文件index.styl即可。

热烈欢迎大家积极发布自己的主题来让kpc丰富多彩起来