[javascript] Svelte에서 CSS 전처리기를 사용할 수 있나요?

24 Nov 2023

Svelte에서 가장 일반적으로 사용되는 CSS 전처리기는 Sass 및 Less입니다. 이들 전처리기를 사용하려면 먼저 해당 라이브러리를 설치해야 합니다. 예를 들어, Sass를 사용하려면 다음 명령을 사용하여 Sass 패키지를 설치할 수 있습니다.

npm install sass

설치가 완료되면 Svelte 컴포넌트 파일 내에서 Sass를 사용할 수 있습니다. .scss 파일을 작성하고 import 문을 사용하여 해당 파일을 컴포넌트에 가져올 수 있습니다. 그런 다음 CSS 스타일을 정의할 때 Sass 문법을 사용할 수 있습니다.

<script>
  import './styles.scss';
</script>

<style lang="scss">
  .container {
    background-color: $primary-color;
  }
</style>

이제 Svelte 컴파일러는 Sass 파일을 CSS로 변환하고 스타일을 적용합니다.

추가로, 자신만의 CSS 전처리기를 만들어 사용할 수도 있습니다. 이를 위해서는 Svelte의 preprocess 옵션을 사용하여 커스텀 전처리기를 구현해야 합니다. 자세한 내용은 Svelte 공식 문서의 “Preprocessors” 부분을 참조하시기 바랍니다.

여기까지가 Svelte에서 CSS 전처리기를 사용하는 방법에 대한 간략한 소개였습니다. Svelte는 다양한 CSS 전처리기를 지원하므로 프로젝트에 가장 적합한 전처리기를 선택하여 개발 효율성을 높일 수 있습니다.

참고 자료: