또하나의 래빗홀 🕳🐇 을 막 빠져나왔...
dart sass 컴파일러 사용 후 컴파일 후 css 파일에 @charset "utf-8"; 가 누락되는 것 발견, 구글 후 결론은 : SCSS 파일 내에 non-ASCII character가 없기 때문에 불필요해서 뺀 것으로 보인다. 논리적인 것 같지만 유지보수 과정에서 누군가가 컴파일러를 사용하지 않고 css 파일을 수정하는 상황이 충분히 발생할 수 있고, 그 과정에서 non ASCII 문자를 css에 바로 추가할 수 있기 때문에 컴파일 시점에서 @charset "utf-8";가 필요하지 않다 하더라도 css 파일은 @charset "utf-8";로 시작되도록 강제적으로 유지시켜야만한다는 결론. 내가 생각한 가장 손쉬운 방법은 아래 코드를 scss에 포함시켜서 @charset "utf-8"; 가 유지되도록 하는 것. 아래 문자("ü:non-ASCII character")가 scss 파일 내에 있는 경우 파일 첫 줄의 @charset "utf-8"; 선언이 유지되어 컴파일됨. /* ü */등으로 간단히 주석처리해서 포함시켜도 되겠지만 유지보수 과정에서 누군가가 파일을 정리하다가 지워지기 쉬울 것 같아서 조금이라도 더 지워질 가능성을 낮춰서 클래스네임 안에 남김.
.utf-8 {
content: "Für charset";/* DO NOT remove this */
}기존 dart sass 쓰기 전 visual studio의 익스텐션 Live Sass Compiler를 사용했을때는 캐릭터셋 선언이 유지되었던 것을 보고 이것저것 실험해 보다가 '\e908' 와 같은 문자열이 포함되어 있을 경우 컴파일할때 content: "";로 컴파일되면서 @charset "utf-8";가 유지되는 것을 발견, 그러나 익스텐션 업데이트 후에 '\e908' 같은 문자열도 정상으로 컴파일되면서 utf-8 정의가 사라짐. dart sass의 오류가 아니어서 다행.
😬🙄
dart sass의 또 다른 문제는... @use를 사용해서 썼을 경우, 1. 개발자가 윈도우에서는 @use 지원하는 컴파일러를 찾지 못했다고 했고, 2. @mixin을 하위 폴더에 넣어 @use로 불러와 사용했을때 @include 적용이 되지 않는 오류 발견. 아직 이 래빗홀에는 깊이 들어가보지 못함... 다음 기회에 그 구멍을 파 보기로 ... 🤦🏻♀️
