#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.