[Svelte] SCSS 환경 설정

안녕하세요. J4J입니다.

 

이번 포스팅은 SCSS사용을 위한 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

SCSS 환경 설정

 

[ 1. 패키지 설치 ]

 

$ npm install -D svelte-preprocess node-sass

 

 

 

[ 2. rollup 설정 파일 수정 ]

 

import sveltePreprocess from 'svelte-preprocess';

...

export default {

    ...

    plugins: [
        svelte({
            preprocess: sveltePreprocess(), // preprocess 등록

            ...
        }),
    ],

    ...

};

 

 

반응형

 

 

[ 3. style태그에 lang="scss" or type="text/scss" 추가하여 사용 ]

 

<script>
</script>

<main>
  <div class="box" />
</main>

<style lang="scss">
  .box {
    width: 100px;
    height: 60px;
    background-color: rgba(#000, 0.5); /* scss에서만 실행가능한 코드 */
  }
</style>

 

or

 

<script>
</script>

<main>
  <div class="box" />
</main>

<style type="text/scss">
  .box {
    width: 100px;
    height: 60px;
    background-color: rgba(#000, 0.5); /* scss에서만 실행가능한 코드 */
  }
</style>

 

 

 

에러 발생할 경우

 

위와 같이 설정을 하고나서 코드를 작성해봤는데 style태그 쪽에 다음과 같은 에러가 발생하시는 분들이 계실 수도 있습니다.

 

에러 발생 케이스

 

 

 

해당 에러가 발생하시는 분들은 다음과 같이 설정을 추가적으로 해주시면 됩니다.

 

 

 

[ 1. extension에 있는 Svelte for VS Code의 설정 버튼(톱니바퀴) 클릭 → Extension Settings 클릭 ]

 

settings 클릭

 

 

728x90

 

 

[ 2. Language-server 설정에 nodejs 설치 위치 설정 ]

 

nodejs 설치 위치 설정

 

 

 

참고적으로 저 같은 경우는 위의 경로에 다음과 같이 되어 있습니다.

 

nodejs 경로

 

 

 

[ 3. vscode 재시작 ]

 

재시작까지 완료하신 분들은 다음과 같이 에러가 나오지 않는 것을 확인하실 수 있습니다.

 

에러 발생되지 않는 코드

 

 

 

 

 

 

이상으로 SCSS사용을 위한 환경 설정하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.