Install and config

Install

$ npm i light-ui --save

Play in local

$ git clone [email protected]:ecmadao/light-ui.git
$ cd light-ui
$ npm i
$ npm i [email protected] [email protected] [email protected]
$ npm run storybook

Build config

use css-modules and PostCSS

• install dependencies

# install css loader
$ npm i style-loader css-loader --save-dev

# install postcss & css-next & postcss-loader
$ npm install postcss --save
$ npm install postcss-cssnext --save
$ npm install postcss-loader --save-dev

• Webpack 3.x config example

// webpack config file

// loaders
const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    config: {
      path: path.join(__dirname, 'postcss.config.js')
    }
  }
};
const cssModulesLoader = ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMaps: true,
        importLoaders: 1,
        localIdentName: '[name]__[local]___[hash:base64:5]'
      }
    },
    postcssLoader
  ],
});

const webpackConfig = {
  module: {
    rules: [
      {
        test: /\.css$/,
        include: /light-ui/,
        loaders: cssModulesLoader
      }
    ]
  }
};

• Webpack 1.x config example

// webpack config file

// css loaders
const cssLoaders = [
  'style-loader',
  'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
  'postcss-loader'
];

const webpackConfig = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        include: /light-ui/,
        loaders: cssLoaders
      }
    ]
  },
  postcss: () => {
    return [
      require('postcss-cssnext')
    ]
  }
};

Usage

// use react component
import { Button, ShortMessage } from 'light-ui';

// or use component wrote in raw javascript (only support ShortMessage and Message now)
import { ShortMessage, Message } from 'light-ui/lib/raw';