[react] react-starter-kit에 bootstrap 적용 시키기.

 

react 개발을 react-starter-kit boilerplate로 한다.

웹 UI를 bootstrap을 적용시켜서 만들려는데,

bootstrap 홈페이지에서 제안하는 방법으로는 적용이 되질 않는다.

react-starter-kit의 구조에 맞게 적용을 시켜야한다.

---

먼저 bootstrap을 설치한다.

npm install --save react-bootstrap bootstrap

 

아래와 같은 방법으로 사용을 하면 제대로 적용이 되지 않는다.

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';


import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

 

 

먼저 아래 파일을 실행한다.

 -bootstrap.css 파일 import

 -useStyles에 추가

// src\components\Layout\Layout.js

...

import bootstrap from 'bootstrap/dist/css/bootstrap.css'; // <-- css파일을 임포트한다.
// external-global styles must be imported in your JS.

...

export default function Layout({ children }) {
	useStyles(s, bootstrap, normalizeCss); // <-- bootstrap을 추가해준다.
	return (
		<>
		<Header />
		{children}
		<Footer />
		</>
	);
}

Layout.propTypes = {
	children: PropTypes.node.isRequired,
};

이렇게 하면 전역적으로  bootstrap component를 사용 할 수 있다.

 

 

참조