Не удалось скомпилировать css для React

#css #reactjs

#css #reactjs

Вопрос:

Я новичок в 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;
  

The Aux.js это просто обернуть что-то.

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

export default aux;
  

Я включаю файлы CSS в свой index.js

 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)
  

Не могу ли я использовать CSS в проектах React?

Спасибо

Комментарии:

1. Можете ли вы указать свой файл с именем font-awesome.min.css проблема, конечно, в том, что вы можете использовать CSS в проектах react =)

2. Используете ли вы CRA? Если нет, вам придется указать загрузчик css в конфигурации вашего webpack для обработки компиляции файла .css.

3. @MarcoMesen font-awesone.min.css — это уже имя файла. Что вы имеете в виду?

4. @LenJoseph Что такое CRA? Я просто использую Rect

5. Извините, я ошибаюсь, другие комментарии могут быть правильными, если вы не используете CRA Create-React-App, вам нужно настроить webpack для обработки файлов .css.