window.open()함수 구현에서 scss가 적용이 안되어서 질문드립니다.

Question

안녕하세요. 주니어 개발자입니다.현재 구현하고 있는 웹페이지에서 모달 창을 띄운 후 원하는 영역에서 print함수를 이용해서 보고서를 출력하려는 기능 구현을 하고 있는 중입니다. 그런데 window.open()과 print()를 이용해서 특정 영역을 보고서로 화면 창에 띄우는 것은 되는 중인데,template안에서 적용되는 scss가 window.open시에는 적용이 안되는 중입니다.. printReport(){ const content = document.querySelector('.content'); const printWindow = window.open('', '_blank','width=900,height=800'); printWindow.document.write( ''+ ''+ '' + // '' + '' + ''+ ''+ '

' + content.innerHTML + '

'+ ''+ ''); printWindow.document.close(); printWindow.focus(); // setTimeout(() => { // printWindow.print() // printWindow.close() // }, 100); },보시는 것과 같이 코드는 이렇게 구현이 되어있습니다.scss가 적용이 안되는 것 같아 css폴더에서 임의로 rpt_test.css를 만들어 localhost:**/css/rpt_test.css로 주소 창을 치니까 css파일이 열리길래 코드에 보이시는 주석 처리 되어있는 로 해보니까 보고서에 css가 적용이 되는 것을 확인했습니다. 그래서 scss폴더에 같은 test파일을 만들어서 주소 창에 쳐보니까 똑같이 파일이 열리길래 코드에 보신 것처럼 로 저장을 한 후 열어보니, 적용이 안되는 중입니다.. css 디렉토리는frontend ㄱ publicㄱ cssㄱ rpt_test.css 에 있고요scss 디렉토리도 마찬가지로 frontend ㄱ publicㄱscssㄱtest.scss 에 있습니다.보시다시피 print()부분을 주석 처리하고 window창에서 f12를 누르고 요소 부분에 head부분도 확인을 해서 보기도 했지만,같은 코드로 나오는데 scss만 적용이 안되는 것이 너무 큰일입니다.. 현재 개발 중인 모든 css가 다 scss에서 사용을 하고 있거든요..도움 주시면 감사드리겠습니다.

내얼굴피콜로 · Answer

scss파일은 브라우저가 읽을 수 없기 때문에 스타일 파일에 링크를 걸어도 아무 소용이 없습니다!scss파일을 컴파일해서 css파일로 만든 뒤 그 컴파일한 css파일을 html의 head에 link를 추가 시켜주셔야 되요!

Clickin · Answer

애초에 vue를 쓰는데 window open으로 html 넣는 게 좀 아이러니긴 하죠Vue의 상태관리를 사용하면서 새 window에 SFC 템플릿을 그대로 넣는 방법이 있으니 기회와 시간이 되신다면 한번 고려해보세요https://okky.kr/articles/1281856

window.open()함수 구현에서 scss가 적용이 안되어서 질문드립니다.

2개의 답변

Q&A 목록