Svelte와 함께 부트스트랩 사용

Svelte와 함께 부트스트랩 사용

부트스트랩이란?

부트스트랩은 모바일 우선 프런트엔드 웹 개발을 돕는 오픈 소스 CSS 프레임워크이다. 애플리케이션 개발 시간과 노력을 줄이는 데 도움이 되는 많은 템플릿과 CSS 클래스가 제공됩니다.

Svelte 프로젝트 만들기

npx degit sveltejs/template svelte-bootstrap cd my-svelte-project npm install npm run dev

위의 명령을 사용하여 새 프로젝트를 만듭니다.

Svelte - https://svelte.dev/blog/가장 쉽게 시작할 수 있는 시작 방법에 대한 공식 문서도 찾아볼 수 있습니다.

옵션 1 - CDN을 통해 부트스트랩 추가

부트스트랩에는 프로젝트에 필요한 모든 번들 CSS 및 js 파일이 들어 있는 간단한 CDN 링크가 있습니다. 이 방법은 프로젝트에 부트스트랩을 포함시키는 가장 쉬운 옵션일 수 있습니다. 아래 링크를 public/index.html에 추가하기만 하면 됩니다.

부트스트랩 웹 사이트로 이동하여 존재하는 CDN 링크를 복사합니다. 이 튜토리얼을 작성한 현재, 부트스트랩의 최신 버전은 5입니다.

https://getbootstrap.com/docs/5.0/getting-started/download/

옵션 2 - 노드 모듈을 통해 추가

롤업 구성 파일을 업데이트한 후 부트스트랩을 npm 패키지로 추가하고 응용 프로그램에 추가할 수 있습니다.

부트스트랩 패키지 설치 중

npm install bootstrap

이 명령을 실행한 후 node_modules 폴더에 부트스트랩이 추가됩니다. 우리는 그것을 공용 폴더에 복사해야 한다. 롤업의 복사 플러그인을 사용하여 이 작업을 자동화할 수 있습니다.

롤업 복사본 플러그인 설치 중

npm install rollup-plugin-copy -D

롤업 구성 파일 업데이트

```js

//...........

import copy from 'rollup-plugin-copy'

//...........

export default {

//...........

plugins: [

// we'll extract any component CSS out into // a separate file - better for performance css({ output: 'bundle.css' }), // Add bootstrap files to public folder copy({ targets: [{ src: 'node_modules/bootstrap/dist/**/*', dest: 'public/vendor/bootstrap' }] }), //........... }; //........... ``` 이 복사본 플러그인을 추가한 후 공용 폴더를 확인하여 공급업체 폴더가 만들어지고 부트스트랩 폴더를 사용할 수 있는지 확인할 수 있습니다. 대부분의 구성이 완료되었습니다. 우리는 index.html 폴더에 이 파일들에 링크를 추가하기만 하면 된다. ```js ``` 바로 그겁니다. 응용 프로그램에서 부트스트랩 클래스 사용 시작 더 많은 토론이나 질문을 위해 우리의 불협화음 채널에 참여하세요. 불일치 - https://discord.gg/AUjrcK6eep

from http://gong-tech.tistory.com/54 by ccl(A) rewrite - 2021-09-25 03:26:47