SVELTESTRAP - Bootstrap 5, Svelte에서 사용하기

CSS를 많이 직접 작성해서 만드는 방법도 있지만, CSS Framework로써, 사전에 구성된 디자인 스타일을 이용하면 보다 손쉽게 화면을 구성할 수 있어서 기존에 필자 역시 웹 개발에 자주 사용하였다.
이번 Svelte를 진행하면서 기존 방식으로 활용할 수 있지만, Svelte에 최적화 된 BootStrap 버전인 SvelteStrap 에 대해서 얘기해 보고자한다.

SvelteStrap은 Bootstrap 와 완벽하게 호환하여 Svelte에서 손쉽게 Bootstrap을 사용할 수 있도록 도와준다.
이를 사용하기 위해서 설치하는 방법은 npm을 이용해서 손쉽게 설치할 수 있다.

설치

 npm install sveltestrap

이제 css 사용을 위해 main.js에 css를 import 시키도록 하자.

import 'bootstrap/dist/css/bootstrap.min.css';

이후 테스트를 위해 /src/App.svelte의 기본 HelloWorld 내용을 다음과 같이 수정하여 정상적으로 CSS가 적용되었는지 확인해보자.

이용

<script>
	import { Button, Col, Row} from 'sveltestrap';
</script>

<main>
	<Row>
		<Col>
		  <Button color="primary" outline>Hello World!</Button>
		</Col>
	</Row>
</main>

npm run dev를 통해서 서버를 실행후 아래와 같이 버튼 스타일이 적용된 것을 알 수 있다.

각 컴포넌트별로 사용법은 아래와 같다.
Components - Get Started ⋅ Storybook (sveltestrap.js.org)

Webpack App