Quasar 사용시 브라우저에 아무것도 뜨지 않는 문제

전제상황

• 크롬 dev 툴에서 요소를 클릭했을 때 정상적으로 뜨고있으나 브라우저 화면은 흰색바탕
• Quasar 를 깔아서 사용하고있고 "quasar.variables.scss" 라는 파일이 존재함
• 브라우저 사이즈에 따라 보였다가 안보임

분노..!!

 

원인

퀘이사가 미디어쿼리 중단점(특정 화면 사이즈에 따라 어떤 화면을 보여줄지에 대한 지점)을 기본적으로 설정해두었기 때문

 

해결방법

quasar.variables.scss 파일로 들어가서 아래의 코드를 넣어준다.

$breakpoint-xs: 100% !default;
$breakpoint-sm: 100% !default;
$breakpoint-md: 100% !default;
$breakpoint-lg: 100% !default;

이러면 모든 중단점이 100%, 뷰포트 사이즈에 맞춰져서 브라우저가 특정 사이즈일때 안보이는 현상도 없어짐.

그리고 필요할 때 저거 100% 바꿔주거나... 미디어쿼리용 변수 따로 생성해서 커스텀하는게 나을듯

그 외에 퀘이사놈의 기본 변수들은 여기에..

 

20000.