Svelte에서 가장 널리 사용되는 CSS 전처리기는 Sass, Less, Stylus입니다. 이러한 전처리기를 Svelte 프로젝트에 적용하기 위해서는 추가적인 설정이 필요합니다.

먼저, Svelte 프로젝트의 루트 디렉토리에서 CSS 전처리기를 설치해야합니다. 예를 들어, Sass를 사용하려는 경우 다음 명령을 사용하여 설치할 수 있습니다:

npm install --save-dev node-sass

다음으로, Svelte 구성 파일인 rollup.config.js를 열고 다음 코드를 추가해야합니다:

import sveltePreprocess from "svelte-preprocess";

export default {
  // ...
  plugins: [
    // ...
    sveltePreprocess({
      // 여기서 CSS 전처리기를 설정할 수 있습니다.
      // 예를 들어, Sass를 사용한다면 다음과 같이 설정할 수 있습니다:
      // preprocess: require('svelte-preprocess')({ scss: true }),
    }),
  ],
};

이제 Svelte 프로젝트에서 CSS 전처리기를 사용할 준비가 되었습니다. Svelte 컴포넌트 파일에서는 .scss, .less, .styl 과 같은 확장자를 가진 CSS 파일을 작성하면 됩니다.

예를 들어, App.svelte 파일에 Sass를 사용하여 스타일을 작성한다면 다음과 같이 할 수 있습니다:

<style lang="scss">
  $primary-color: #ff0000;

  .container {
    background-color: $primary-color;
    padding: 20px;
  }
</style>

이렇게 하면 Svelte에서 CSS 전처리기를 사용하여 스타일을 작성할 수 있습니다. 추가적인 설정이나 자세한 내용은 해당 CSS 전처리기의 공식 문서를 참조하시기 바랍니다.