jimo-antd-theme

Antd theme for jimengio

Theme

Preview: https://jimengio.github.io/jimo-antd-theme/

Antd variables

platform / platformV3
q806V3 / q806HCV3
...

css

lib
├── platform.min.css
├── platform_v3.min.css
├── platform_hc.min.css
├── platform_hc_v3.min.css
├── q806_hc_v3.min.css
├── q806_v3.min.css

less

lib
├── platform.theme.less
├── platform_v3.theme.less
├── platform_hc.theme.less
├── platform_hc_v3.theme.less
├── q806_v3.theme.less
├── q806_hc_v3.theme.less

Usage

Installation

yarn add -D @jimengio/jimo-antd-theme

less

import "antd/dist/antd.less";
import "@jimengio/jimo-antd-theme/lib/platform.theme.less";

webpack

// Entry file

// import "antd/dist/antd.css";
import "antd/dist/antd.less";

const jimoTheme = require("@jimengio/jimo-antd-theme");

// add rule
exports.matchLessRule = {
  test: /\.less$/,
  use: [
    {
      loader: "style-loader",
    },
    {
      loader: "css-loader",
    },
    {
      loader: "less-loader",
      options: {
        modifyVars: {
          ...jimoTheme.platform,
        },
        javascriptEnabled: true,
      },
    },
  ],
};

css

不是很推荐，根据具体 antd 版本打包，会有兼容性问题

// import "antd/dist/antd.min.css";
import "@jimengio/jimo-antd-theme/lib/platform.min.css";

Dev

# install dependencies
yarn

# example
yarn example

# build package
yarn build

# sync less type (src)
yarn gen-type
# generated from local files
yarn gen-type local

# generate less files (lib)
yarn gen-less

# generate css files (example/lib)
yarn gen-css [compress, type, build]

# generate css file (for example)
yarn gen-css
# generate compressed css file (for example)
yarn gen-css compress
# generate typescript css string file (for example)
yarn gen-css type
# generate compressed css file (for lib)
yarn gen-css build