老师，为什么我的antd design无法显示Icon 图标和Menu组件

Question

pc显示的效果:

这是我的 pc_header.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

import React from 'react'; import ReactDOM from 'react-dom'; import { Row, Col } from 'antd'; import { Menu, Icon } from 'antd'; const SubMenu = Menu.SubMenu; const MenuItemGroup = Menu.ItemGroup; export default class PCHeader extends React.Component{     constructor() {         super();         this.state = {             current: 'top'         };     }   render(){     return (       <header>                 <Row>                   <Col span={2}></Col>                   <Col span={4}>                     <a href="/" class="logo">                       <img src="./src/images/logo.png" alt="logo"/>                       <span>GLNews</span>                     </a>                   </Col>                   <Col span={16}>                     <Menu mode="horizontal" selectedKeys={[this.state.current]}>                     <Menu.Item key="top">                                 <Icon type="book"/>头条                             </Menu.Item>                             <Menu.Item key="shehui">                                 <Icon type="appstore"/>社会                             </Menu.Item>                             <Menu.Item key="guonei">                                 <Icon type="appstore"/>国内                             </Menu.Item>                             <Menu.Item key="guoji">                                 <Icon type="appstore"/>国际                             </Menu.Item>                             <Menu.Item key="yule">                                 <Icon type="appstore"/>娱乐                             </Menu.Item>                             <Menu.Item key="tiyu">                                 <Icon type="appstore"/>体育                             </Menu.Item>                             <Menu.Item key="keji">                                 <Icon type="appstore"/>科技                             </Menu.Item>                             <Menu.Item key="shishang">                                 <Icon type="appstore"/>时尚                             </Menu.Item>                     </Menu>                   </Col>                   <Col span={2}></Col>                 </Row>       </header>     );   }; }

root.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

import React from 'react'; import ReactDOM from 'react-dom'; import {Router,Route,hashHistory} from 'react-router'; import { Button } from 'antd'; import PCIndex from './components/pc_index'; import MobileIndex from './components/mobile_index'; import 'antd/dist/antd.css'; import MediaQuery from 'react-responsive'; export default class Root extends React.Component{   render(){     return (       <div>         <MediaQuery query='(min-device-width: 1224px)'>           <PCIndex/>         </MediaQuery>         <MediaQuery query='(max-device-width: 1224px)'>           <MobileIndex/>         </MediaQuery>       </div>      );   }; } ReactDOM.render(<Root/>,document.getElementById('mianContainer'));

Answer 1

Little_3L 2018-05-13 20:31:41

我和你一样，按照老师的做法引入antd design样式，样式不生效。我在入口文件引入

import 'antd/dist/antd.css';

报下图这个错：

然后我就不用老师的方法，就直接在index.html里面使用link标签引入css文件，如下：

<link rel="stylesheet" href="node_modules/antd/dist/antd.min.css" >

就生效了，虽然不知道为什么，可能是因为我webpack用的最新版的，ant不支持？就不是很懂。

目前还在百度中。。。

• Little_3L #1

  希望老师看到了这个问题也解答一下

• 提问者 捕鱼麦大叔 回复 Little_3L #2

  试了一下你的方法，果然解决了

• 提问者 捕鱼麦大叔 回复 Little_3L #3

  我的是 webpack3.0.0 版本，可能是webpack 打包的时候有问题

点开查看后面1条评论