CSS 未加载 antd 菜单选项

Question

为了与 next.js 框架做出反应，我正在使用 antd npm packge 来处理 table 等控件，菜单 etc.But css 没有为控件加载。我做错了..

 import React, { Component } from 'react';
 import { Menu, Icon } from 'antd';
 import '../Header/header.css';
 class HeaderComponent extends Component {
     render() {
         return (
             <div className="navbar">
                 <div className="col-1">
                     <img src="../../static/logo.png" ></img>
                 </div>
                 <div className="col-2">
                     <Menu mode="horizontal">
                         <Menu.Item key="app-user">App Users</Menu.Item>
                         <Menu.Item key="non-app-user">Non App Users</Menu.Item>
                     </Menu>
                 </div>
             </div>        );
     }
 }

编辑： cssheader.css

 .navbar {
     width: 100%;

 }

 .header {
     display: flex;
     flex-direction: column;
 }

这是我的next.config.js

 if (typeof require !== 'undefined') {
     require.extensions['.less'] = file => {};

   }

   const withLess = require('@zeit/next-less'),
      nextConfig = {
       //target: 'serverless',
       env: {
         weatherApi: '',
         mapBoxApi: ''
       },
       onDemandEntries: {
         maxInactiveAge: 1000 * 60 * 60,
         pagesBufferLength: 5
       },
       lessLoaderOptions: {
         javascriptEnabled: true
       },
       webpack: config => config
     };

   module.exports = withLess(nextConfig);

我想我必须在nextconfig.js.generates这个错误中进行配置

错误：您可能需要合适的加载器来处理这种文件类型，目前没有配置加载器来处理这种文件

Answer 1

您需要在主 css 文件中导入 css 说 app.css

app.css:

@import '~antd/dist/antd.css';

.App {
  some css...;
}

...

然后在您的父组件中导入 app.css：

import React, { Component } from 'react';
import { Menu, Icon } from 'antd';
import './app.css';
 class HeaderComponent extends Component {
     render() {
         return (
             <div className="navbar">
                 <div className="col-1">
                     <img src="../../static/logo.png" ></img>
                 </div>
                 <div className="col-2">
                     <Menu mode="horizontal">
                         <Menu.Item key="app-user">App Users</Menu.Item>
                         <Menu.Item key="non-app-user">Non App Users</Menu.Item>
                     </Menu>
                 </div>
             </div>        );
     }
 }

或导入import "antd/dist/antd.css"而不是包含在单独的css文件中。

CSS 未加载 antd 菜单选项

CSS is not loading for antd Menu option

reactjs

next.js

antd