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

本地环境

• 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 非常感谢。