css - 包含 css 到 React 编译失败

Question

我是 React 的新手，我正在尝试创建一个 TopNav.js 组件。

我的 app.js 包括这个 TopNav

import React from 'react';
import logo from './logo.svg';
import './App.css';

import TopNav from './components/Menu/TopNav';

function App() {
  return (
    <TopNav />
  );
}

export default App;

这是我的 TopNav.js：

import React from 'react';

import Aux from '../../hoc/Aux';

const topNav = (props) => (
    <Aux>
        <header class="header_main">
            <section class="container">
                <section class="row">
                    <section class="col-xs-12 col-sm-6 col-md-6">
                        <figure class="logo"><a href="#"><img src="images/logo.png"  alt=""/></a></figure>
                    </section>
                    <section class="col-xs-12 col-sm-6 col-md-6">
                        <ul class="nav_main pull-right">
                            <li><a href="#">Help</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Sign Up</a></li>
                            <li><a href="#">Log In</a></li>
                        </ul>
                    </section>
                </section>
            </section>
        </header>
    </Aux>
);

export default topNav;

Aux.js 只是为了包装一些东西。

const aux = (props) => props.children;

export default aux;

我在 index.js 中包含 css 文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import './css/bootstrap.min.css';
import './css/main.css';
import './css/media.css';

import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

当我尝试编译这个项目时，它返回：

Failed to compile.

./src/css/font-awesome.min.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/css/font-awesome.min.css)

我不能在 React 项目中使用 CSS 吗？

谢谢

标签： cssreactjs