nowa-theme

基于kuma-base增强nowa多主题方案。

Feature

• 多主题配置
• 无需引入多个主题less文件

Install

$ npm i nowa -g
$ nowa install theme

Usage

1. 新建项目

$ nowa init uxcore

2. 生成theme.config.json主题配置文件、less模板文件

$ nowa theme init

3. 在需要的地方引入less文件

4. 启动服务

$ nowa theme server

5. 部署生成多主题文件目录

$ nowa theme build

theme.config.json 配置

{
  "theme": [
    {
      "name": "orange", // 主题名称
      "default": true // 默认主题
      ... // 配置其他自定义字段
    },
    {
      "name": "alipay"
    },
    {
      "name": "green"
    }
    ...// 自行添加其他主题
  ]
}

默认less模板文件 colors.ejs 内容

@import '~kuma-base/theme/<%= theme.name %>.less';
// 可根据theme.config.json添加的自定义字段、添加逻辑代码, 也可新建多个模板文件。

工具会将其转化为对应的less文件，在你需要它们的时候引入即可。

@import '../theme/colors.less';
.a {
  font-size: 14px;
  color: #333;
  background-color: @brand-primary;
}