부트스트랩 + react + sass + typescript + vite를 위한 스타터

vite + react + typescript + sass + bootstrap을 사용하여 프로젝트를 설정하는 방법에 대한 가이드입니다.
여기에서는 이러한 프로젝트를 보관하는 두 가지 방법을 소개합니다.

하나는 준비되어 시작하기 쉽고 다른 하나는 수동이며 단계별 설정이 필요합니다.

쉽게 시작할 수 있습니다.

준비된 것은 https://github.com/calidion/Vite-React-Typescript-Sass-Bootstrap-Starter에 있습니다.

업데이트를 확인하고 풀 요청을 보낼 수 있습니다.

gh repo clone calidion/Vite-React-Typescript-Sass-Bootstrap-Starter {your-project-name}
cd {your-project-name}
yarn
yarn dev

단계별 설정

vite 내장 도구로 vite + bootstrap + typescript 프로젝트 생성

yarn create vite

그런 다음 프롬프트와 함께 프로젝트 이름을 입력해야 합니다.

? Project name: › vite-project

프로젝트 이름을 입력한 후 다음과 같은 프롬프트와 함께 사용할 프레임워크를 선택해야 합니다.

? Select a framework: › - Use arrow-keys. Return to submit.
❯   vanilla
    vue
    react
    preact
    lit
    svelte

여기서는 react를 선택하고 보다 구체적으로 react-ts를 선택합니다. react를 선택한 후에 다음 변형 선택 섹션이 표시됩니다.

? Select a variant: › - Use arrow-keys. Return to submit.
❯   react
    react-ts

이제 react + typescript 프로젝트가 준비되었습니다.

그런 다음 다음에 대한 지원을 추가하기 시작합니다.
부트스트랩과 사스.

부트스트랩 설치

종속 항목 추가package.json

yarn add bootstrap
yarn add @popperjs/core

node.js 유형 설치

yarn add --dev @types/node

Sass 지원 설치

yarn add --dev sass

.css 파일을 .scss로 변경

index.css를 index.scss로 변경App.css를 App.scss로 변경

.css 가져오기를 .scss로 변경

main.tsx 변경

import './index.css'

에게

import './index.scss'

App.tsx 변경

import './App.css'

에게

import './App.scss'

필요한 경우 부트스트랩 JS 가져오기

import { Tooltip, Toast, Popover } from 'bootstrap';

일반적으로 import bootstrap 패키지가 필요하지 않습니다. 그러나 Tooltip , Toast , Popover 가 제대로 작동해야 하는 경우 반응 구성 요소로 가져와야 합니다.

개발 시작

yarn dev

URL을 열면 다음 그림과 유사한 페이지가 표시됩니다.