Bootstrap 5 + React 프로젝트 설정 및 사용자 정의

recent release of Bootstrap 5 Beta 1 와 함께 이제 새로운 주요 업데이트 작업에 발을 담그고 최종 릴리스가 출시될 때를 대비하여 도구를 준비할 수 있는 좋은 시간입니다.

프로젝트 설정 🗂

1. 환경 설정 🌳

디렉터리에서 새 npm 패키지를 초기화합니다.

$ npm init -y

-y 매개변수는 모든 옵션에 대해 기본 응답을 수락하도록 npm에 지시합니다.

다음으로 패키지를 설치합니다.

$ npm i bootstrap@next react react-dom next sass

그러면 다음이 설치됩니다.

bootstrap@next -- 부트스트랩 5 베타

react -- 리액트

react-dom -- React DOM

next -- NextJS

sass -- SASS/SCSS 전처리기

또한 다음과 같이 package.json에서 스크립트를 설정해야 합니다.

{
  // ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  //...
}

2. SCSS 파일 추가 👨‍🎨

다음으로 SCSS 폴더와 파일을 추가해야 합니다.

$ mkdir scss
$ touch scss/main.scss

scss/main.scss에 다음 내용을 추가합니다.

// Import Bootstrap 5 Beta!
@import "~bootstrap/scss/bootstrap.scss";

3. 페이지 설정 📄

일반적인 인덱스 페이지를 설정해야 하지만 /pages 디렉토리 내에 있는 사용자 정의 앱 구성 요소도 설정해야 합니다. 이는 Bootstrap 5 Beta가 전체 NextJs 앱에 로드되도록 하기 위함입니다.

페이지 폴더, 인덱스 페이지 및 사용자 지정 앱 구성 요소를 만듭니다.

$ mkdir pages # Your pages folder
$ touch pages/index.js # The index page
$ touch pages/_app.js # The custom App component

pages/index.js 파일에 다음을 추가합니다.

const IndexPage = () => {
  return "Hello world!";
};

export default IndexPage;

그리고 pages/_app.js 파일에 다음을 추가합니다.

import "../scss/main.scss";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

이 시점에서 터미널에서 npm run dev를 실행하고 웹 브라우저에서 http://localhost:3000/을 탐색하면 범용 개발자 메시지 "Hello world!"가 표시됩니다.



이제 재미있는 부분을 위해...

부트스트랩 커스터마이징 🎨

따라서 우리는 프로젝트를 시작하고 실행하고 종속성이 모두 설치되어 준비가 되었으며 부트스트랩을 기본 SCSS 파일로 가져오고 있습니다.

인덱스 페이지에 일부 구조와 약간의 콘텐츠를 추가해 보겠습니다.

const IndexPage = () => {
  return (
    <div className="container">
      <div className="row">
        <div className="col">
          <h1 className="mt-4">Hello world!</h1>
          <p>This is Bootstrap 5 Beta + NextJS</p>
          <button className="btn btn-primary me-2">Read the docs!</button>
          <button className="btn btn-outline-secondary">
            or just get started
          </button>
        </div>
      </div>
    </div>
  );
};

export default IndexPage;

그러면 부트스트랩의 완벽하게 반응하는 모바일 우선 그리드 시스템 내에서 새로운 콘텐츠가 렌더링됩니다.



그런 다음 Bootstrap의 SCSS 변수를 재정의하여 테마를 빌드할 수 있습니다.

// Change the primary colour
$primary: rgb(207, 44, 4);

// Set the sans-serif font
$font-family-sans-serif: Arial, sans-serif;

// Maybe set a difference heading font family
$headings-font-family: Georgia, serif;

// Make headings bolder!
$headings-font-weight: 700;

// Thicken up our borders
$border-width: 3px;

// Remove the border-radius everywhere
$border-radius: 0;

// Import Bootstrap 5 Beta!
@import "~bootstrap/scss/bootstrap.scss";

다음과 같은 정보를 제공해야 합니다.



다음 부트스트랩 5 + NextJS 웹 앱 시작을 시작하기에 충분해야 합니다.

이제 나가서 아름다운 것을 만드십시오!