반응형
Vuejs: 섀도우 루트가 아닌 헤드에 CSS가 로드됩니다.
Vue Web 컴포넌트 내에서 vue-tel-input을 사용하려고 합니다.단, vue-tel-input CSS는 예상대로 웹 컴포넌트에 의해 로드되지 않습니다.
섀도우 루트가 아닌 헤드에 로드된 CSS.** 섀도우 루트에 css를 로드하는 방법을 잘 모르겠습니다.
재현 순서:
여기서 vue-tel-input 필드를 사용하여 간단한 Vue.js 앱을 볼 수 있습니다.웹 컴포넌트를 빌드함으로써(npm run build-wcdist 폴더에서 demo.demo를 열면 vue-tel-input 필드가 올바르게 렌더링되지 않음을 알 수 있습니다.
그림 보기
사용하시는 경우npm run build-wc명령어를 사용하여 Vue 컴포넌트를 웹 컴포넌트로 컴파일하고 CSS도 같은 파일의 일부로 유지해야 합니다.
따라서 코드에는import 'vue-tel-input/dist/vue-tel-input.css';또는 태그의 일부로 단일 파일 구성요소에 보관합니다.이렇게 하면 청크된 CSS는 섀도우 루트의 일부가 됩니다.
언급URL : https://stackoverflow.com/questions/57487917/vuejs-css-is-loaded-in-the-head-instead-of-the-shadow-root
반응형
'programing' 카테고리의 다른 글
| '프라그마'라는 단어는 어디서 유래한 걸까요? (0) | 2022.08.03 |
|---|---|
| v-for 내부의 개체 어레이에 새 속성을 동적으로 추가하는 방법 - Vue.js (0) | 2022.08.03 |
| Vuex 저장소의 두 상태 병합 (0) | 2022.08.03 |
| VueJ, Vuex, Getter가 빈 어레이로 표시되지만 console.log에 모든 값이 포함된 개체로 표시됨 (0) | 2022.08.03 |
| 자체 API에서 Nuxt Js로 콘텐츠를 프리렌더하는 방법 (0) | 2022.08.03 |