svelte 시작하기 + vite scss 세팅

임기홍·2022년 7월 11일
0

참고 문서

https://svelte.dev/

시작하기

  1. 최초준비물 : node.js 설치 https://nodejs.org/ko/download/

  2. npm + vite 이용하여 svelte 템플릿 설치.

npm create vite@latest my-app -- --template svelte
cd svelte-app
npm i
npm run dev
  1. 최초 세팅이 로컬호스트 3000으로 되어 있으므로 http://localhost:3000/ 접속

  1. 튜토리얼 참고하여 개발하기. (튜토리얼이 너무 잘 되어 있음!)
    https://svelte.dev/tutorial/basics

원래 svelte를 사용하려면 템플릿 파일을 zip file을 다운로드 받거나, npx를 사용했는데, 최근 기본 번들링 툴이 rollup에서 vite로 바뀌면서 초기 명령어가 더 바뀌었다. vite가 요새 대세 흐름을 타고 있으니 사용해보면 좋을 듯 😉


SCSS 추가

npm i svelte-preprocess
npm i sass
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import sveltePreprocess from 'svelte-preprocess';

export default defineConfig({
  plugins: [svelte(
	{
		preprocess: sveltePreprocess(),
	}
  )],
  ...
})
profile
오히려 좋아😁

0개의 댓글