Sass @import 및 Legacy API 해결 방법

@Import

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

@import 구문이 사라진다고 한다. (= 정확히는 css @import 구문으로 바뀌는 거다.) 따라서 이 구문 대신 @use와 @forward를 사용하라고 하는데 한번도 사용해보지 않아서 어떻게 사용하는지 잘 몰랐다.

styles/var.scss

@import '@baejino/style/scss/var';

특정 scss에서 라이브러리의 var를 통합하거나 다른 파일에 선언한 var를 가져오고 있었다고 해보자.

@forward '@baejino/style/scss/var';

이런 경우에는 그냥 forward로 바꿔주면 된다.

Component/Component.module.scss

@import '~/styles/var';

.Component {
    @media (min-width: $BREAKPOINT_DESKTOP) {
        &:hover {
            background-color: #2a2a2a;
        }
    }
}

실제로 변수를 사용하려는 경우 use 구문으로 바꿔주면 된다. import 구문을 사용할 때는 변수를 즉시 선언해서 사용할 수 있었지만 use의 경우에는 네임스페이스 기반으로 변수들을 호출할 수 있다고 한다. 파일명이 네임스페이스인 것으로 보인다.

@use '~/styles/var';

.Component {
    @media (min-width: var.$BREAKPOINT_DESKTOP) {
        &:hover {
            background-color: #2a2a2a;
        }
    }
}

뒤에 as 구문을 사용해서 네임스페이스의 별칭을 만들어 줄 수 있다.

@use '~/styles/var' as a;

.Component {
    @media (min-width: a.$BREAKPOINT_DESKTOP) {
        &:hover {
            background-color: #2a2a2a;
        }
    }
}

as * 구문을 사용하면 import 하던 것과 동일하게 네임스페이스 없이 변수를 사용할 수 있다.

@use '~/styles/var' as *;

.Component {
    @media (min-width: $BREAKPOINT_DESKTOP) {
        &:hover {
            background-color: #2a2a2a;
        }
    }
}

Legacy JS API

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

Vite의 번들러의 기본 설정을 사용하고, 딱히 뭘 선언해준건 없었는데 어느날 위와같이 경고가 떳다. 해결법을 찾아보니 API를 modern으로 바꿔주면 된다.

export default defineConfig({
    css: { preprocessorOptions: { scss: { api: 'modern' } } },
})