Question

在对next.js框架做出反应时，我将antd npm packge用于表格，菜单等控件。但是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>        );
     }
 }

编辑： css header.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中进行配置。生成此错误

错误：您可能需要适当的加载程序来处理此文件类型，当前未配置任何加载程序来处理此文件

Answer 1

您需要在主css文件（例如app.css）中导入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文件中。

没有为antd菜单选项加载CSS

1 个答案: