[SCSS] @import 👉 @use로 변경하기

⚠️ As of Dart Sass 1.80.0, the @import rule is deprecated and will be removed from the language in Dart Sass 3.0.0. Prefer the @use rule instead.

SCSS의 @import는 Dart Sass 1.80.0 버전부터 사용이 중단되었으며, Dart Sass 3.0.0에서는 완전히 제거될 예정입니다. 이에 따라 @import를 @use로 변경하는 것이 권장됩니다. @use의 장점과 사용법, 그리고 기존 프로젝트를 어떻게 마이그레이션할 수 있는지 자세히 살펴보겠습니다.

@use의 특징 및 위치 규칙

@use는 SCSS 파일 최상단에 위치해야 하며, 다른 규칙보다 먼저 작성되어야 합니다.

@import '/src/mixin.scss';
@use '/src/btn.scss';

// Error: @use rules must be written before any other rules.

위 예시처럼 @use가 다른 규칙 이후에 작성되면 오류가 발생합니다.

@import와 @use의 차이점

@import와 @use의 주요 차이점은 공식 문서에서 확인할 수 있습니다

• 네임스페이스 관리: @use는 네임스페이스를 통해 다른 파일에서 정의된 변수, 믹스인 등을 명시적으로 참조해야 합니다.
• 중복 방지: 동일한 파일이 여러 번 포함되는 것을 방지하여 성능 향상을 도모합니다.

// @import 예시: 중복 로드
@import 'variables';
@import 'variables'; // 같은 파일이 두 번 로드됨

// @use 예시: 중복 로드 방지
@use 'variables';
@use 'variables'; // 한 번만 로드됨

폴더 구조 변경하기

SCSS 구조를 정리하여 @use를 효율적으로 활용할 수 있도록 폴더 구조를 개편해보겠습니다.
구조는 kliemann의 포스팅을 참고했습니다.

AS-IS

scss/
├── abstracts/
│   ├── _functions.scss
│   ├── _mixins.scss
│   └── _variables.scss
├── base/
│   ├── _reset.scss
│   └── _common.scss
├── components/
│   ├── _input.scss
│   ├── _badge.scss
│   └── _button.scss
├── layout/
│   ├── _layout.scss
│   ├── modal.scss
│   ├── header.scss
│   └── footer.scss
├── pages/
│   ├── login.scss
│   └── user.scss
└── style.scss

특정 컴포넌트 혹은 페이지에서만 쓰이는 header.scss와 같은 파일을 제외한 공통 스타일 파일을 style.scss에 import 했습니다.

// style.scss
@import 'abstracts/mixin', 'abstracts/variables';
@import 'base/reset', 'base/common';
@import 'components/btn', 'components/input', 'components/badge';
@import 'layout/layout';

그럼 기존에 @import로 불러온 공통 스타일 파일을 @use로 변경해봅니다.

// style.scss
@use '@css/abstracts/mixin';
@use '@css/abstracts/variables';
@use '@css/base/reset';
@use '@css/base/common';
@use '@css/components/input';
@use '@css/components/badge';
@use '@css/components/button';
@use '@css/layout/layout';

이렇게 길어진 이유는!
@use는 한 번에 하나의 파일만 가져오는 규칙을 적용하기 때문입니다.

Each @use rule can only have one URL.

TO-BE

@use와 @forward를 활용하기 위해 각 폴더에 _index.scss 파일을 추가합니다.

scss/
├── abstracts/
│   ├── _index.scss  
│   ├── _functions.scss
│   ├── _mixins.scss
│   └── _variables.scss
├── base/
│   ├── _index.scss
│   ├── _reset.scss
│   └── _common.scss
├── components/
│   ├── _index.scss
│   ├── _input.scss
│   ├── _badge.scss
│   └── _button.scss
├── layout/
│   ├── _layout.scss
│   ├── modal.scss
│   ├── header.scss
│   └── footer.scss
├── pages/
│   ├── login.scss
│   └── user.scss
└── style.scss

파일을 한 번에 묶어서 불러오기 위해, 각 폴더에 _index.scss파일을 추가하고 @forward로 필요한 파일을 내보냅니다.

// abstracts/_index.scss
@forward 'variables';
@forward 'mixins';
@forward 'functions';

파일명을 _index.scss로 지정하면, 폴더명을 파일명으로 사용 가능합니다. 이제 style.scss파일을 이렇게 줄일 수 있습니다.

// style.scss
@use '@css/abstracts';
@use '@css/base';
@use '@css/components';
@use '@css/layout/layout'; // layout 폴더에는 공통으로 import할 파일이 layout.scss 하나라서 따로 index 파일 작성하지 않음

변수 및 믹스인 참조

@use를 사용할 때는 네임스페이스를 활용해 명시적으로 참조해야 합니다.

// _variables.scss
$c-white: #ffffff;
$c-primary: #002b5c;


// _footer.scss
@use '@css/abstracts'; // 네임스페이스 사용

------
<네임스페이스>.[변수]로 작성
------
.footer {
  color: abstracts.$c-white;
  background-color: abstracts.$c-primary;
}

// 네임스페이스 별칭 사용
@use '@css/abstracts' as abs;

.footer {
  color: abs.$c-white;
  background-color: abs.$c-primary;
}

// 네임스페이스 생략
@use '@css/abstracts' as *;

.footer {
  color: $c-white;
  background-color: $c-primary;
}

vite.config.js 설정하기

위의 예시와 같이 공통적으로 사용 될 변수는 일일히 네임스페이스를 명시하는것 보다 전역적으로 사용하는것이 합리적일 수 있습니다. (이전포스팅)

// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
            @use '@css/abstracts' as *;
        `,
      },
    },
  },
});

additionalData 옵션을 사용해 abstracts 파일을 전역으로 불러오면, 네임스페이스를 생략하고도 SCSS 변수 및 믹스인을 사용할 수 있습니다.

그러나 너무 많은 파일에 as *를 쓰는 것은 모듈화의 장점을 약화시킬 수 있으니 필요한 곳에만 신중히 사용하는 게 좋습니다.