오늘 빠른 안내를 드리겠습니다.다음 매개 변수를 사용하여 새 웹 응용 프로그램 항목을 설정하고 있습니다.

나는 그것이 Next.JS에 기반을 두고 싶다. 왜냐하면 이것은 내가 가장 좋아하는React 프레임워크이기 때문이다.

저는 Bootstrap 5로 그것을 디자인하고 싶습니다. 왜냐하면Tailwind가 저에게 준 것이 아니라 일치하는 주제를 만드는 데 더 많은 도움이 필요하기 때문입니다.

저는 SASS에서 스타일을 작성하고 싶습니다. 이것은 Bootstrap이 엔진 뚜껑 아래에서 사용하기 때문에 사용자 정의Bootstrap 테마를 더욱 쉽게 만들 수 있습니다.

저는 PurgeCSS 운행 양식을 통해 운송의 불필요한 유도 팽창을 피하고 싶습니다.

그럼 어떻게 했어요?

1.NextJS

새로운 NextJS 프로젝트를 만드는 것은 매우 간단합니다.우선example을 프로젝트의 기초로 선택한다.저는 개인적으로 with-typescript-eslint-jest를 선택했습니다. 왜냐하면 저는 vanilla JS가 아니라 Typescript로 작성하는 것을 더 좋아하고 VS코드에서 ESLint를 사용해서save를 눌렀을 때 자동으로 파일의 스타일을 설정하는 것을 좋아합니다.
그 다음에 npm을 사용하느냐, 실을 사용하느냐에 따라 하나를 실행하고 선택한 예시 템플릿에서 바꾸며 프로젝트 이름으로 바꾸기your-project:

npx create-next-app -e with-typescript-eslint-jest your-project

yarn create next-app -e with-typescript-eslint-jest your-project

Note that from here onward I'll be writing everything in yarn commands, so be sure to substitute npm if that's what you're using.

이렇게 너는 끝장이야.너는 기본적인 다음 게 있어.JS 응용 프로그램이 준비되었습니다.yarn dev로 시작하여 당신의 사이트 운행 속도http://localhost:3000입니다.

2. SASS의 Bootstrap 5

다음은 안내 5를 추가합니다.부트 요소가 몇 개만 있으면 react-bootstrap 패키지를 사용할 수 있습니다.그들의 2.0 버전(Bootstrap 5 기반)은 현재 테스트 버전에 있다.하지만 더 크고 개성화된 테마를 구축하고 싶어서 Bootstrap을 직접 설치합니다.

yarn add bootstrap@^5.0.1

이렇게 하면 부트 프로그램의 원래 소스가 노드 모듈에 추가됩니다.현재 Bootstrap은 두 가지 부분인 스타일과javascript를 결합하여 아름다운 기능 구성 요소를 만들었습니다.
우선 스타일을 추가합시다.Bootstrap 테마의 값을 확장하고 덮어쓸 수 있도록 SASS에서 스타일을 작성할 것입니다.너는 customizing Bootstrap in SASS here에 관한 더 많은 정보를 읽을 수 있다.
다행히 NextJS에는 SASS에 대한 내장 지원이 포함되어 있습니다.따라서 sass 패키지를 추가하고 styles/index.scss를 쉽게 만들 수 있습니다.

yarn add sass

// Example: override to give us a salmon body background
$body-bg: #ffbbbb;

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

그런 다음 가져오기pages/_app.tsx:

import type { AppProps } from "next/app";
import "../../styles/index.scss";

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

당신의 개발 사이트를 새로 고치면 기본적인 안내'재시작'스타일이 적용되고 배경은 현재 아름다운 연어색입니다.
다음은 Javascript 입니다.만약 우리가 동적 구성 요소를 사용한다면, 예를 들어 Alert, 우리는 이렇게 하기만 하면 된다.그렇다면 우선 의존 항목popper을 설치해야 합니다.

yarn add @popperjs/core

그리고 우리는 Bootstrap's recommendations를 사용하여 그들의 JS를 패키지 환경으로 가져옵니다._app.tsx에서 다음 중 하나를 선택합니다.

// If you want to pull in the whole Bootstrap JS library:
import "bootstrap";

// If you only need a single component:
import Alert from "bootstrap/js/dist/alert";

이것들은 Webpack이 우리가 프로그램을 구축하여 생산하거나 내보낼 때 관련 원본 파일을 최종 패키지에 포함시킨다는 것을 알려 줍니다.

3. PurgeCSS로 깔끔하게 유지

TailwindCSS는Bootstrap에 비해 사용하지 않는 프레임의 팽창 부분을 자동으로 편집할 수 있기 때문에 사이트에서 어떤 요소도 사용하지 않으면 <table> 요소에 스타일을 제공하지 않는다는 장점이 있다.이것은 PurgeCSS를 통해 이 점을 실현하는데 이것은 그것에 있어서 보잘것없다. 왜냐하면 그것은 먼저 PostCSS와 동적 양식을 바탕으로 생성되기 때문이다.
NextJS는 PostCSS를 첨부했기 때문에 Next에 PurgeCSS를 추가하여Bootstrap과 같은 초능력을 부여할 수 있습니다.불행하게도 PurgeCSS page on this에서 지적한 바와 같이 맞춤형 PostCs는NextJS의 내장 최적화를 닫기 때문에 다시 만들어야 합니다.다행히도, 이것은 결코 어렵지 않다.먼저 필요한 패키지를 설치합니다.

yarn add -D autoprefixer postcss @fullhuman/postcss-purgecss postcss-flexbugs-fixes postcss-preset-env

이제 이러한 섹션이 배치되었으므로 프로젝트의 루트 폴더에 사용자 정의postcss.config.js 파일을 생성하여 구성 파이핑에 모두 넣습니다.

module.exports = {
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: { flexbox: "no-2009" },
        stage: 3,
        features: { "custom-properties": false }
      }
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"]
      }
    ]
  ]
};

파일의 전반부는 사용자 정의 포스트Cs의 NextJS's documentation에서 직접 추출됩니다.두 번째 부분에서는 PurgeCSS를 추가하고 이름이 src 또는 pages 디렉토리에 없는 모든 클래스를 삭제하도록 구성합니다.이 두 요소의 렌더링이 다음 프로젝트 원본 파일의 범위를 넘어섰기 때문에 수동으로 html 또는 body 스타일을 보존하라고 알려 줍니다.
네, 로컬 개발 버전을 다시 갱신한 다음에...아무것도 안 변했어!이것은 고의적인 것이다. PurgeCSS는 사용하는 클래스를 제거해서는 안 된다.여기에는 Reboot-Bootstrap의 브라우저 표준화 스타일시트에 필요한 스타일도 포함되어 있습니다.표준화된 요소 유형을 재부트하는 경우 PurgeCSS는 이를 인식하고 해당 스타일에 영향을 주지 않습니다.

이렇게

자, 간단한 1, 2, 3. 이제 새로운 Next JS 프로젝트가 생겼습니다. Bootstrap 5 스타일을 효율적이고 스마트하게 편집했습니다.이것은 네가 프로젝트를 세우는 데 도움이 되기를 바란다.