自己搭建的 webpack 环境，使用 antd 组件，发现样式有些问题

[broadliyn]

本地环境

• antd 版本:1.6.5
• 操作系统及其版本： mac osx 10.11.6
• 浏览器及其版本: chrome 51

相关配置

package.json:

{
  "name": "react",
  "version": "1.0.0",
  "description": "",
  "main": "app/main.jsx",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --devtool eval --progress --hot --content-base app --history-api-fallback",
    "deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js"
  },
  "dependencies": {
    "babel-runtime": "^6.11.6",
    "react": "15.2.1",
    "react-dom": "15.2.1",
    "react-router": "2.4.0"
  },
  "devDependencies": {
    "antd": "^1.6.5",
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-antd": "^0.4.1",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.23.1",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "open-browser-webpack-plugin": "0.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    path.resolve(__dirname, 'app/index.jsx')
  ],
  output: {
    path: __dirname + '/build',
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders:[
      { test: /\.css$/, loader: 'style!css' },
      { test: /\.less$/,loader: 'style!css!less' },
      { test: /\.js[x]?$/, include: path.resolve(__dirname, 'app'), exclude: /node_modules/, loader: 'babel-loader' },
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  }
};

.babelrc ：

{
  "presets": [ "es2015", "stage-0", "react"],
  "plugins": [["antd", { "style": true }]]
}

index.jsx

import ReactDOM from 'react-dom';
import React from 'react';

import {Tabs} from 'antd';
import {DatePicker} from 'antd';

const TabPane = Tabs.TabPane;

ReactDOM.render(
    <div>
        <Tabs defaultActiveKey="1">
            <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
            <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
            <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
        </Tabs>
        <DatePicker />
    </div>,
    document.getElementById('root')
);

执行 npm start 启动 webpack dev server ，发现样式和官网展示的不一样

Tabs 组件 Tab 的高度 100%，在我的浏览器上表现为 Tab 高度占满了整个窗口，内容区被挤到可视区域下边了。日历控件日期的文字大小、颜色均与官网展示的效果不一样，非常不协调。

如果用官方提供的 antd-init 工具来生成脚手架的话，样式是好的。但是换成自己 webpack 搭的环境，样式就有异常了，不知道是不是我的环境配置出了问题。

我的环境配置： https://github.com/broadliyn/antd-demo 非常感谢。