ola-ui
基于 Xeact 与 Ant Design 的组件库。
Install
yarn add ola-ui
DEV
yarn build ## 打包 yarn dev ## 打包 (watch 模式)
Quick Start
import style
;
use component
; ... <Button>Button</Button> ...
use components as xeact
;
Primary Button
webpack rule for ola-ui style
test: /ola\.less$/ use: 'style-loader' loader: "css-loader" options: minimize: true sourceMap: true importLoaders: 1 modules: false localIdentName: '[local]--[hash:base64:5]' loader: "less-loader" options: sourceMap: true modifyVars: theme javascriptEnabled: true paths: path
webpack rule for app style
test: /\.less$/ exclude: /ola\.less$/ use: 'style-loader' loader: "css-loader" options: minimize: true sourceMap: true importLoaders: 1 modules: true localIdentName: '[local]--[hash:base64:5]' loader: "less-loader" options: sourceMap: true modifyVars: theme javascriptEnabled: true
工程类依赖添加按需加载 babel 插件
yarn add --dev babel-plugin-transform-imports
Structure
components
- index.js --- 组件实现
- x.js --- 组件的 xeact 封装
- x-foo-bar.js --- 关联内部组件的 xeact 封装
- style.less --- 内部样式(css modules)
styles
- fonts/ icon font
- global/ 全局公共样式