[1/2] @import 대신 @use 사용하자. 그럼 @forward 는?

[2022. 08. 30]

이론부터 털어보자!

 

@import와 @use는 여러 페이지에서 공통으로 사용할 mixing, function, variable을 가져와 사용하게 해준다.

@import는 파일을 전역으로 가져오기 때문에 CSS 에러가 발생할 경우 문제 구간 파악이 어렵다.

@use는 위 문제를 개선하기 위해 나온 규칙이다.

 

@import 사용 방법

@import ‘mixin’;

.box {
	@include box(200px, 200px);
	border: 1px solid red;
}

* Sass는 @import 규칙을 권장하지 않는다. 점차적으로 제거할 예정이다.

 

 

@use 사용 방법

@use ‘mixin’;

.box {
	@include mixin.box(200px, 200px);
	border: 1px solid red;
}

• @use 규칙은 다른 스타일시트에서 mixin, 변수, 함수를 로드 하고 여러 스타일시트의 CSS를 결합한다.
• @use에 의해 로드된 스타일시트를 “모듈”이라고 한다.
• 해당 스타일이 로드된 횟수와 상관없이 컴파일된 CSS에 딱 한 번만 포함된다.
• @use로 로드된 mixin, 변수, 함수는 로드하는 스타일시트에서만 볼 수 있다.
• @use는 모든 mixin 파일을 컴파일 하지 않고, 원하는 mixin 내용만 컴파일한다.

* Sass는 유용한 내장 모듈을 제공한다.

* @import 규칙 대신 @use 규칙을 선호한다.

 

 

@forward 사용 방법

// colors.scss
$red: red;

// common.scss
@forward ‘colors’;

// main.scss
@use ‘common’;

 

• @forwrad를 사용하면 반복적인 @use의 사용을 줄일 수 있다.
• mixin, 변수, 함수를 여러 파일에서 사용하고 싶다면, @forward 규칙을 사용해 하나의 공유 파일에 mixin, 변수, 함수를 모두 불러와서 사용할 수 있다.
• @use는 현재 파일에서 바로 사용하기 위해서 사용하고, @forward는 바로 사용하는 파일, 즉 @use 한 현재 파일에 partial 한 다른 파일들을 불러올 때 사용한다.
  => 사용자가 entrypoint 파일을 로드하는 동안, 많은 파일에 걸쳐 Sass 라이브러리를 구성할 수 있게 한다.
  => @forward 된 모듈을 직접 정의한 것처럼 사용할 수 있다.

* 같은 파일에 @forward 와 @use 가 있을 경우, @forward 를 먼저 작성하자

 

 

 

---

[2022. 09. 08]

프로젝트에 실제 적용하기!

 

위의 내용을 실제 개인 프로젝트에 적용해보았다.

단순하게 문법만을 바꾸면 된다고 안일하게 생각했다.

하지만 생각보다 제한적인 부분이 있었고, 일일이 소스를 다 수정해야 해서 번거로웠다.

아래의 내용은 프로젝트에 실제 적용하면서 깨닫게 된 소소한 팁들이다.

 

 @use, @forward 사용 시 알아두면 좋은 점 

1. 스타일시트를 전역으로 사용할 수 없다.

@use의 사용 목적은 변수, 함수, mixin의 전역 사용을 금지하는 것에 있었다.

스타일시트를 전역으로 사용하면, 어느 부분에서 에러가 났는지 찾기 번거롭기 때문이다.

(물론, 소스를 역으로 추적해서 에러를 찾을 수 있고, 내가 짠 부분이니까 어디가 잘못되었는지 찾는 건 어렵지 않다. 하지만 프로젝트의 규모가 크고, 협업하는 사람이 많다고 가정할 경우엔 에러 찾기가 어렵다.)

 

@use를 사용할 경우, 작업 파일에서 사용할 각각의 스타일시트를 모두 불러오기 때문에, 변수, 함수, mixin의 충돌을 막을 수 있다.

CSS로 컴파일 될 때,

main.scss에서 불러온 @use 'mixin';과

sub.scss에서 불러온 @use 'mixin';은

딱 한 번 컴파일 되지만, 각각 파일에서 사용 시 다른 객체로 인식한다.

 

현재 나의 프로젝트에서는 vue.config.js 파일에 additionalData로 스타일시트를 전역으로 사용하도록 선언했다.

module.exports = defineConfig({
	css: {
	loaderOptions: {
		scss: {
			additionalData: '@import "~@/assets/scss/_mixin.scss";"'
		}
	}
}

하지만 전역으로 스타일시트를 사용할 수 없기 때문에 해당 선언을 삭제했다.

 

1-1. 전역으로 사용할 수 없다면, 수십 개의 스타일시트를 매번 @use 해야 할까? N

@use를 사용할 경우 작업 파일에서 사용할 스타일시트는 모두 불러와야 하는데, 수십 개로 분기한 스타일시트들을 모두 @use 하는 건 불편한 일이다.

그래서 *분기한 스타일시트만을 불러오는 modules.scss*를 만들었다.

기존에 분기했던 공통 스타일시트들을 한번에 불러와서 @use ‘modules’; 하나만을 사용한다.

번거롭게 각각의 파일로 불러오지 않고, modules.scss만 불러오면 되기 때문에 사용하기 편하다.

 

before)

@use ‘mixin’;
@use ‘button’;
@use ‘tab’;

…

body {
	color: mixin.$red;
}
.common-tab {
	@include tab.basicTab(3);
}

 

after)

@use ‘modules’;

body {
	color: modules.$red;
}
.common-tab {
	@include modules.basicTab(3);
}

 

 

2. @use를 로드하는 스타일시트에서만 사용할 수 있다.(@use의 유효 범위는 선언한 파일)

공통을 사용하는 파일 최상단에 @use ‘modules’;를 선언해 줘야 한다.

 

 

3. 분기한 스타일시트를 불러올 경우엔 @forward를 사용한다.

@use와 @forward는 둘 다 각 파일의 모든 요소를 import 한다.

하지만 각각 사용에 있어서 차이점이 있다.

@use를 사용하면, 해당 파일에서 @use 한 변수, 함수, mixin에 접근해 사용이 가능하지만,

@forward를 사용하면 선언한 파일의 변수, 함수, mixin에 접근할 수 없다.

@forward는 단순히 전달만 해주는 선언이다.

@forward 된 파일에 직접 접근은 불가능하고, 직접 접근하려면 @forward로 가져온 스타일시트 파일을 @use 해야 한다.

나의 경우엔, modules.scss 파일 안에서 @forward 된 파일들을 직접 사용할 수 없고, modules.scss를 @use로 가져와서 사용했다.

// modules.scss
@forward 'mixin';
@forward 'button';
@forward 'tab';

section {
	color: mixin.$red; // 접근 불가
}

 

1, 2, 3의 내용을 도표화

 

 

4. Vue의 SFC에서 <style lang=“scss” scoped> 사용할 경우

@import를 사용할 경우엔, vue.config.js에서 mixin.scss 파일을 전역으로 선언했다. (1. 참고)

그러나 @use를 사용할 경우 전역 사용이 불가능하다.

여러 테스트를 해본 결과, <style lang=“scss” scoped> 안에서 @use를 이용해 스타일시트를 불러올 수 있다.

단, 스타일시트 파일 내부에선 @use ‘파일명’;으로 선언했지만, <style lang=“scss” scoped> 내부에선 @use ‘절대 경로’;를 선언해 줘야 한다.

 

 

5. as * 사용 지양

@use로 스타일시트를 불러올 경우 as 키워드를 사용해 스타일시트 별칭을 사용할 수 있다.

 

before)

@use ‘subCategoryBoard’;

section {
	color: subCategoryBoard.$red;
}

 

after)

@use ‘subCategoryBoard’ as board;

section {
	color: board.$red;
}

 

5-1. *을 사용하면, 사용할 변수, 함수, mixin 앞에 해당 파일명을 지정하지 않고 전역’처럼’ 사용할 수 있다.

@use ‘subCategoryBoard’ as *;

section {
	color: $red;
}

하지만 해당 방법은 지양하는 것이 좋다고 생각한다.

@use를 사용하는 이유가 변수, 함수, mixin의 충돌을 막기 위함인데, as *을 사용한다면 결국 어딘가에선 충돌이 날 위험이 생긴다.

그럼 @use를 사용하는 이유가 사라진다.

as 키워드는 아주 유용하지만, 전역 선언을 지양하자.

 

 

 

 

📌 꼭 읽어주세요!

https://sass-lang.com/documentation/at-rules/use

Sass: @use

https://sass-lang.com/documentation/at-rules/forward

Sass: @forward

https://sass-lang.com/documentation/at-rules/import

Sass: @import