V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
broadliyn
V2EX  ›  React

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

  •  
  •   broadliyn · 2016-07-29 14:32:33 +08:00 · 11805 次点击
    这是一个创建于 2799 天前的主题,其中的信息可能已经有所发展或是发生改变。

    本地环境

    • 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 ,发现样式和官网展示的不一样

    2016-07-29 13 49 23 2016-07-29 13 49 45

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

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

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

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   946 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 21:03 · PVG 05:03 · LAX 14:03 · JFK 17:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.