1. 개요
Svelte 프로젝트를 생성하고 나서 페이지 및 컴포넌트의 스타일을 위해서 css 대신 sass(scss)를 사용하고 싶어서 다음과 같이 컴포넌트의 style 태그에 lang="scss" 라는 attribute를 셋팅해주고 scss 문법으로 코드를 작성 후 로컬 개발 환경에서 확인 해보려 했더니
다음과 같이 [plugin:vite-plugin-svelte]라며 에러가 나타났다.
여기서 대충 프로젝트에서 scss문법을 인식하지 못하고 있다고 예상했고 See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md를 확인 해보았다.
2. 설정
2.1 svelte.config.js에 preprocess 설정
svelte preprocess 공식 문서를 확인 해보니, svelte.config.js 파일에서 preprocess를 다음과 같이 셋팅해주라고 나와있었다.
// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
export default {
preprocess: [vitePreprocess()]
};
따라서 svelet.config.js파일에 다음과 같이 셋팅 해주었다.
2.2 프로젝트에 sass 설치
preprocess 셋팅까지 완료한 뒤 로컬 개발 환경에 돌아가 보니 다음과 같은 에러가 나오고 있었다.
Preprocessor dependency "sass" not found. Did you install it? Try 'npm install -D sass'.
해석해보자면 sass를 dependency(node_modules)에서 못찾고 있다. sass 설치한것 맞아? npm install -D sass 커맨드 입력해서 sass를 설치하라며 안내가 나왔다.
위 안내를 따라서 Svelte 프로젝트 루트에서 터미널을 열고, npm install -D sass를 입력하여 설치했다.
위 과정까지 거치고 나서 로컬 개발 환경을 확인 해보니, 드디어 문제 없이 scss 문법이 적용돼서 나오고 있는 것을 확인할 수 있었다.
3. 결론
3.1. svelte.config.js에서 아래 코드 추가
// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
export default {
// code ...
preprocess: [vitePreprocess()]
};
