[Svelte] 전역 SCSS 등록하기

안녕하세요. J4J입니다.

 

이번 포스팅은 전역적으로 사용될 scss 등록하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

scss를 이용하여 개발하다 보면 @import를 이용하여 다른 scss 파일에 정의된 내용들을 가져다 사용하는 경우가 있습니다.

 

하지만 이런 scss파일들 중 전역적으로 사용되는 파일들이 존재하기 마련인데 이런 상황이 생기게 되면 scss가 사용되는 모든 파일에 @import를 이용하여 로드를 해줘야 됩니다.

 

이것은 만약 사용되는 파일명이 변경하게 되면 모든 파일들을 수정해줘야 되는 불상사가 발생할 수가 있는데 이런 일들을 간단하게 해결하고자 전역적으로 등록해주는 방법이 존재합니다.

 

 

 

전역으로 등록하게 되면 다음과 같은 이점이 생길 것이라고 생각합니다.

 

• @import를 모든 파일에 일일이 작성할 필요도 없어지게 됩니다.
• 파일명이 수정되더라도 전역 등록을 위한 소스코드만 수정해주면 되기 때문에 관리하기도 수월해지게 됩니다.

 

 

반응형

 

 

전역 SCSS 등록

 

만약 전역 scss를 등록하지 않을 경우 사용되는 예시 코드를 만들어 보겠습니다.

 

우선 App.svelte에는 다음과 같이 코드를 작성해보겠습니다.

 

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

<style lang="scss">
  @import './common.scss'; // common.scss에 정의된 내용들 로드
</style>

 

 

 

그리고 App.svelte와 동일한 위치에 common.scss를 다음과 같이 작성해보겠습니다.

 

.box {
    width: 400px;
    height: 180px;
    background-color: rgba(salmon, .8); // scss에서만 사용 가능
}

 

 

 

위와 같이 작성하고 실행해보면 다음과 같이 실행되는 것을 확인할 수 있습니다.

 

실행 결과

 

 

 

common.scss파일에 정의된 스타일을 적용하기 위해 @import를 이용하여 로드해주는 상황을 만들어줬습니다.

 

위의 예시는 하나의 파일에만 적용이 되고 있어서 문제될 건 없지만 만약 개발되고 있는 모든 svelte파일에 해당 코드를 적어준다는 것은 역시나 효율적이지 못한 부분이라고 생각됩니다.

 

그렇기 때문에 위처럼 @import이용하지 않고도 동일한 결과가 나오도록 만들어 보겠습니다.

 

 

 

[ 1. scss 사용 환경 세팅 ]

 

여기를 참고하셔서 scss 사용 환경을 세팅해주시길 바랍니다.

 

 

728x90

 

 

[ 2. rollup 설정 파일 수정 ]

 

export default {
    plugins: [
        svelte({
            preprocess: sveltePreprocess({
                scss: {
                    // 전역 scss 파일 등록, scss가 사용되는 곳에만 적용
                    prependData: ['@import "./src/common.scss";'],
                },
            }),
        }),
    ],
};

 

 

 

[ 3. App.svelte 수정 ]

 

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

<style lang="scss">
  // @import './common.scss'; // common.scss 로드 주석처리
</style>

 

 

 

위와 같이 rollup을 통해 prependData설정을 해준다면 @import를 사용하지 않고도 동일한 결과가 나오는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

이상으로 전역적으로 사용될 scss 등록하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.