Next.js에서 부트스트랩 설정 및 사용자 지정

기본 부트스트랩 동작을 구성하여 다음 프로젝트의 모양과 느낌을 개선하는 방법을 알아보세요.

몇 달 전에 how to add and customize Bootstrap in Nuxt.js 에 블로그를 썼습니다. 오늘은 Next.js 프로젝트에서 Bootstrap을 설정하는 방법을 알아보겠습니다. 또한 Bootstrap 기반 React 구성 요소를 사용하기 위해 react-bootstrap을 설치합니다.

내용물

1. 부트스트랩 설치하기

2. 사용자 지정 SCSS 만들기

3. 다음 구성 구성

4. 부트스트랩 가져오기

1. 부트스트랩 설치

필요한 NPM 패키지를 설치하여 시작하겠습니다. bootstrap 및 선택적으로 react-bootstrap 을 설치합니다.

사용자 정의 SCSS 파일을 만들 것이므로 node-sass도 설치해야 합니다.

npm install --save bootstrap react-bootstrap node-sass

2. 맞춤형 SCSS 생성

이제 styles/scss 디렉토리에 사용자 정의 scss 파일을 만들고 이름을 global.scss로 지정하겠습니다. 이 파일에서 Bootstrap의 bootstrap.scss를 가져와야 합니다. 단순화를 위해 Bootstrap에서 제공하는 기본 색상 시스템을 재정의하겠습니다.

$theme-colors: (
  'primary': #145bea,
  'secondary': #833bec,
  'success': #1ce1ac,
  'info': #ff7d50,
  'warning': #ffbe0b,
  'danger': #ff007f,
  'light': #c0ccda,
  'dark': #001738,
);

@import '/node_modules/bootstrap/scss/bootstrap.scss';

3. 다음 구성 구성

최신 버전의 Next에 대한 가장 좋은 점은 내장 SASS/SCSS 지원을 제공한다는 것입니다. Next에 알려야 할 것은 next.config.js를 구성하고 다음 코드를 추가하여 스타일이 저장되는 위치입니다.

const path = require('path')

module.exports = {

  ...

  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

4. 부트스트랩 가져오기

마지막 단계는 커스텀 부트스트랩을 프로젝트로 가져오는 것입니다. 사용자 정의 스타일을 사용해야 하는 위치에 따라 global.scss를 가져올 수 있습니다. 이 예에서는 전체 프로젝트에서 사용하도록 구성해 보겠습니다.

pages/_app.js 파일에 다음 코드를 추가해야 합니다.

import 'styles/scss/global.scss' // added

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

export default MyApp

우리는 해냈습니다. 다음 프로젝트에서 부트스트랩을 설정했습니다.

🤝 저와 연결하세요

저는 프리랜서 및 오픈 소스 프로젝트를 진행하면서 커뮤니티를 위해 글을 쓰는 것을 좋아합니다. • • Github • Email을 통해 저에게 연락하십시오.

💌 뉴스레터 받기

나는 Nuxt, Vue, Strapi, Flutter, Jamstack 및 Automation에 대해 씁니다. Subscribe to my newsletter .

📙 즐겁게 읽을 수도 있습니다.

How to add and customize Bootstrap in Nuxt.js

How to achieve a redesign of your website