VScode 확장 파일 저장 시 자동 정형의 영향으로 Vite의 열 회신에 장애가 발생하여 CSS가 비어 있음

안녕하세요.
며칠 전, Vite 데뷔 때 예상치 못한 현상을 만났는데...
어렵기 때문에 대응 방법과 함께 기록을 남긴다.
이 기사는 개인 블로그의 글을 전재한 것이다.

요약

먼저 결론을 알고 싶은 사람에게 결론을 써라.
VScode 확장된 Autoprefixer + 파일 저장 시 확장된 자동 정형 동작 가져오기
↓
Vite를 시작하는 로컬 서버 쓰기 코드
↓
Vite(CSS 파일을 저장할 때)의 핫 로딩이 가끔 실패할 수 있으며, 결과물의 CSS 컨텐트가 비어 있을 수 있습니다.
↓
Vite와 Autoprefixer를 병용하는 상황에서 Autoprefixer를 VS코드로 확장하지 말고 Vite 측이 PostCSS로 실행하도록 하세요!
참고로 이 기사는 Vite에 대해 특별히 설명하지 않았다.

조우시의 상황과 그 현상

해외 어느 과제 사이트의 과제를 추진 중이다.
미량의 한쪽에도 자바스크립트를 쓰기 때문에 가까스로 vite를 가져오려고 하다가 도중부터 가져오기 시작했다.
https://ja.vitejs.dev/
소개할 때 공식 홈페이지에서 모두 이 글을 참고하였다.
https://ics.media/entry/210708/#contents-anchor-pitfalls
Vite를 사용하는 것은 이번이 처음입니다.
도입한 재미와 폭발적인 속도를 경험하는 환경이 차세대 프런트엔드 도구로 주목받는 것도 이해할 수 있는 마음이다.
그 중에서도 스타일 편집을 위해 CSS 파일을 몇 번이나 핫 리셋하면...
폭발 속도의 핫 재킷으로 전혀 스타일이 없어요.
너무 갑작스러워서 "갑자기 왜!?"이런 나 자신.
그곳에서 다시 여러 번 열중재를 하면 원상태로 돌아오는 경우도 계속된다.
간혹 있을 뿐이라면 괜찮은데, 4, 5회 간격으로 발생하니까 이번에는 원인을 조사해보자.

원인을 조사하다

JavaScript 파일을 읽지 않았습니까?실행되지 않음?

Vite를 사용할 때 CSS 파일에 대한 읽기를 시작할 JavaScript 파일에서 가져올 수도 있습니다.
내 사정도 이렇게 했다.
그래서 처음에 자바스크립트가 읽히지 않고 실행되지 않았나요?잠깐만요.
자바스크립트 파일에 setInterval을 설치해 보면 보통 일을 하고 있다는 견해가 없기 때문이다.
또한, 이러한 현상은 CSS 파일을 저장할 때의 핫 리로드에서만 발생하기 때문에 CSS가 이상하게 변했다는 주장도 있다.

CSS가 이상해요?

일반 시기와 현상 발생 시 CSS를 비교합니다.

소스 JavaScript 파일에서 CSS 파일을 가져올 때

js/main.js

import '../css/style.css';

Vite 원래 동작은 다음과 같습니다.
https://ja.vitejs.dev/guide/features.html#css
.css 파일을 가져온 후 HMR을 지원하는 스타일 레이블을 사용하여 해당 내용을 페이지에 삽입합니다.

원래 이렇게 헤드 탭 아래에 스타일 탭을 삽입해서 CSS의 내용을 펼칩니다.
그러나 현상이 발생했을 때 스타일 라벨 자체는head 라벨 아래에 삽입되었지만 내용은 비어 있었다.

링크 탭에서 CSS 파일을 읽을 때

index.html

<link href="css/style.css" rel="stylesheet" />

일반적으로 CSS 파일은 질의 매개변수가 있는 파일을 읽는 느낌이 됩니다.


현상이 발생하면 CSS 파일의 컨텐트가 비어 있습니다.


이렇게 되면 CSS는 이상해진다. 이것은 특정한 것이다.
그리고 왜 CSS가 이상해졌지?부분적 조사.

Google 선생님께 의지하는 Issue를 보십시오.

우선 같은 현상을 겪은 사람이 있는지 살펴보자!
↓
비슷한 현상이 일어난 사람도 못 찾고...
그럼, Vite 창고에 올라간 적이 있는지 아이슈!
↓
약간 비슷한 현상을 발견한 이슈지만 잘 읽어보면 달라요...
이것은 설마 보기 드문 현상을 일으킨 것입니까?
원인을 확인할 수 있다면 Vite 창고 controte의 기회인가요?
그렇게 생각해요.
...그런데 여기서 VScode 확장자가 파일을 저장할 때 자동으로 성형하는 일이 생각납니다.
아, 이거 자동 성형 하는 거 아니에요?그래서 나는 그곳을 보러 가기로 했다.

특정 VScode 확장

이때 VScode에 파일을 저장할 때 자동 성형 작업을 수행하는 확장에는 CSS 파일과 관련된 세 가지가 있습니다.

StyleLilt: CSS의 정적 해석 + 자동 성형

Preettier: 코드 포맷기

Autoprefixer: 공급업체의 접두사를 가진 CSS 속성을 자동으로 권한을 부여하는 녀석

설정을 조정하면서 하나하나 보면...

StyleLilt: 현상 없음

Prettier: 현상 없음

Autoprefixer:현상발생!

예, Autoprefixer 파일을 저장할 때 자동으로 성형하고 공을 치는 것이 이상합니다.

위트와 Autoprefixer의 공존

다만, Autoprefixer는 매우 편리하기 때문에 그것을 공존시킬 방법을 강구하고 싶다.
구글에 다시 가보니 Vite 쪽에서 실행하면 되잖아요.
(혹은 대다수 사람들이 이렇게 하는 것 같아...🙄)
VScode 확장된 자동 성형 설정 삭제(기본값은 OFF)
settings.json

- "autoprefixer.formatOnSave": true

라이브러리로 설치

$ yarn add -D postcss autoprefixer

PostCSS로 Autoprefixer 설정
postcss.config.js

module.exports = {
  plugins: [require('autoprefixer')],
};

https://ja.vitejs.dev/guide/features.html#postcss
프로젝트에 올바른 PostCSS(postcss-load-config가 지원하는 임의의 형식이 있다면, 예를 들어:postcss.config.js)는 가져온 모든 CSS에 자동으로 적용됩니다.
공식과 마찬가지로 이것만 자동으로 적용된다.
Autoprefixer에 대한 선택은 원하는 대로 합니다.
Vite의 설정 파일vite.config.js에도 PostCSS의 설정을 쓸 수 있는 속성이 있기 때문에 거기에 써도 된다.
자신의 경우 다른 서류로 바꾸고 싶어 분리한다.
로컬 서버가 설정되면 확장된 CSS에 협력업체 접두사 CSS 속성을 승인합니다!
정식 구축 생성물도 확인할 수 있어 해결되었다🎉
이렇게 하면 Vite의 폭발 속도 환경을 충분히 누릴 수 있다!
참고로 공급업체 접두사를 가진 CSS 속성은 스스로 쓰지 않기 때문에 스타일라이트property-no-vendor-prefix 규칙을 가져오는 것이 좋습니다.
이것은 공급업체의 접두사를 금지하는 규칙이기 때문에 써도 바로 알아차릴 수 있다.

잡담

이 조사를 진행할 때 마침 스타일린의 VScode 확장 업데이트를 만났습니다.
1 시스템 출시와 함께 StyleLitt14 시스템의 지원 + 파괴적인 변경으로 확장이 동작하지 않습니다...
조사할 때 미묘한 관계가 있는 다른 대응을 하지 마세요.
그렇게 생각했지만 정식 과도지침을 보면서 설정을 다시 수정하면서 무사한 결과를 얻었다(웃음)
이번에도 별거 아닌 글자 수 기사가 나오며 평소와 문체를 조금 바꿔가며 놀아봤다.
기분 나쁘면 미안해.
이 글을 쓸 때 아마 이런 현상에 부닥친 자신이겠죠?그럴 생각은 없지만 뭔가 도움이 된다면 좋겠네요.

참조 링크 요약

Vite

jQuery에서 Type Script·React까지!Vite로 시작된 현대 고속 개발 환경 구축

웹 엔지니어(인코더)를 위한 Vite 환경 소개 [초보자를 위한 설명]