javascript - vue 단일 파일 스타일의 범위가 잘못되었습니다. 이유를 알려주십시오.

Question

a.vue

으아악

b.vue

으아악

근데 b.vue 접속시 부스트랩 스타일이 붙어있어서 스코프를 분리하는 효과가 없나요?

Answer 1

@import 때문인가봐요

먼저 vue-loader의 범위 지정 원리를 살펴보겠습니다.
https://vue-loader.vuejs.org/...

부트스트랩 스타일이 있는 페이지는 부트스트랩 CSS가 vue-loader에 의해 처리되지 않았다는 의미일 뿐입니다. 그런 다음 다음 postcss 및 @import 키워드를 검색한 후 postcss-import 플러그인을 찾았습니다.
https://www .npmjs.com/package…

이 플러그인을 사용하면 문제가 해결될 거라 생각하는데, 테스트해보진 않았고 추측일 뿐입니다

Answer 2

b의 상위 페이지를 찾아 레벨별로 올라가면 해당 페이지를 참조해야 합니다

Answer 3

넣기만 하면@import '../css/bootstrap.css';去掉；
换成<style src="../css/bootstrap.css" scoped></style> 완성