[2/2] @import 대신 @use 사용하자. sass-migrator를 사용해보자.

[2022. 09. 14]

sass-migrator를 사용해서 이전 버전의 소스를 한 번에 변경해보자!

 

Sass에서 @import를 사용하지 않고, @use와 @forward를 사용하는 이유를 공부했다.

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

그렇다면 Sass 버전 업을 할 경우, 그 많은 소스를 어떻게 바꿔야 할까?

그 고민을 해결하기 위해 전체 소스를 한 번에 바꿀 수 있는 sass-migrator를 사용해 보았다.

 

---

 

설치

npm i sass-migrator

 

사용

sass-migrator <migration> <entrypoint.scss>
sass-migrator <옵션> <변경할 파일>

 

@use 규칙을 사용하도록 기존 변경하기 위해 module migration을 사용해서 글로벌 옵션을 테스트했다.

각 옵션이 어떤 출력을 하는지 확인해보자.

* module migration은 멤버 정의와 멤버 이름을 모두 수정해야 할 수 있으므로 --migrate-deps 옵션으로 실행하거나 패키지 또는 애플리케이션의 모든 스타일시트를 전달하도록 하는 것이 중요하다.

Because the module migrator may need to modify both member definitions and member names, it’s important to either run it with the --migrate-deps option or ensure that you pass it all the stylesheets in your package or application.

 

---

 

📌--migrate-deps

<entrypoint.scss>와 관련된 모든 스타일시트를 변환한다.

<entrypoint.scss>를 구성하기 위한, _reset.scss, _mixin.scss 등등 import 하는 파일들 모두 변환한다.

 

--migrate-deps 명령어 입력 후 실행

sass-migrator module --migrate-deps src/assets/scss/style.scss

--migrate-deps 명령어 입력 후 화면

변경된 파일 목록

<entrypoint.scss>인 style.scss와 관련된 파일들이 모두 변환된다.

변경된 파일 목록 화면 (--migrate-deps 옵션 사용)

 

변경된 <entrypoint.scss> 내용

변경된 <entrypoint.scss> 내용 일부 화면 (--migrate-deps 옵션 사용)

 

<entrypoint.scss>의 구성 파일 중 하나인 _component.scss 파일이 변경된 모습

<entrypoint.scss> 파일에 import 된 파일 내용 일부 화면 (--migrate-deps 옵션 사용)

 

---

 

📌--load-path

단독으로 사용하면 마이그레이션되지 않는다.

다른 옵션과 사용하면, <entrypoint.scss> 해당 파일만 변경한다.

 

--load-path 명령어 입력 후 실행

sass-migrator module --load-path src/assets/scss/style.scss

--load-path 명령어 입력 후 화면

 

📌📌--load-path + --migrate-deps

entrypoint 파일만 변경하는 --load-path   VS   entrypoint 관련 파일까지 모두 변경하는 --migrate-deps

같이 사용한다면?

 

<entrypoint.scss> 해당 파일만 변경한다.

 

--load-path + --migrate-deps 명령어 입력 후 실행

sass-migrator module --load-path --migrate-deps src/assets/scss/style.scss

--load-path와 --migrate-deps 명령어 입력 후 화면

변경된 파일 목록

변경된 파일 목록 화면 (--load-path + --migrate-deps 옵션 사용)

 

---

 

📌--dry-run

변환될 파일의 경로 로그가 출력된다.

어떤 게 바뀔지 확인할 수 있다.

실제로 바뀌진 않는다.

 

--dry-run 명령어 입력 후 실행

sass-migrator module --dry-run src/assets/scss/style.scss

--dry-run 명령어 입력 후 화면

 

📌📌--dry-run + --migrate-deps

변환될 파일의 경로 로그가 출력되는 --dry-run과

entrypoint 관련 파일까지 모두 변경하는 --migrate-deps를 같이 사용한다면?

 

변환된 파일인 <entrypoint.scss>와 관련된 모든 스타일시트의 경로 로그가 출력된다.

어떤 게 바뀔지 확인할 수 있다.

실제로 바뀌진 않는다.

 

--dry-run + --migrate-deps 명령어 입력 후 실행

sass-migrator module --dry-run --migrate-deps src/assets/scss/style.scss

--dry-run과 --migrate-deps 명령어 입력 후 화면 (마이그레이션 '될' 파일만 출력)

 

---

📌--verbose

<entrypoint.scss> 해당 파일만 변환하고, 변환 완료된 경로 로그가 출력된다.

 

--verbose 명령어 입력 후 실행

sass-migrator module --verbose src/assets/scss/style.scss

--verbose 명령어 입력 후 화면

변경된 파일 목록

변경된 파일 목록 화면 (--verbose 옵션 사용)

📌📌--verbose + --dry-run

해당 파일만 변환하고, 변환 완료된 경로 로그가 출력되는 --verbose   VS  변환될 파일의 경로 로그만 출력하는 --dry-run

같이 사용한다면?

 

변환될 파일의 경로 로그가 출력된다.

변경될 내용에 대한 로그가 출력된다.

실제로 바뀌진 않는다.

위 두 옵션은 쌍(pair)을 이뤄서 사용한다.

 

--verbose + --dry-run 명령어 입력 후 실행

sass-migrator module --verbose --dry-run src/assets/scss/style.scss

--verbose와 --dry-run 명령어 입력 후 화면

 

📌📌--verbose + --migrate-deps

해당 파일만 변환하고, 변환 완료된 경로 로그가 출력되는 --verbose와

entrypoint 관련 파일까지 모두 변경하는 --migrate-deps를 같이 사용한다면?

 

<entrypoint.scss>와 관련된 모든 스타일시트를 변환한다.

변환 완료된 <entrypoint.scss>와 관련된 모든 스타일시트의 경로 로그가 출력된다.

 

--verbose + --migrate-deps 명령어 입력 후 실행

sass-migrator module --verbose --migrate-deps src/assets/scss/style.scss

--verbose와 --migrate-deps 명령어 입력 후 화면

변경된 파일 목록

<entrypoint.scss>인 style.scss와 관련된 파일들이 모두 변환된다.

변경된 파일 목록 화면 (--verbose와 --migrate-deps 옵션 사용)