결론

<style scoped> 로 아이 컴퍼넌트 스타일을 설정하면(자), 그 스타일은 아이 컴퍼넌트의 맨 위의 루트에만 적응된다

라고 하는 룰을 검증한 결과, 그대로였다.

참고:
vue-loader -자식 구성 요소의 루트 요소-
vue-loader의 Scoped CSS 스타일이 아이 컴퍼넌트의 루트 요소에 효과가 버려 괴롭다

Vue CLI를 만져 처음 1주일, 컴포넌트의 <style> 의 쓰는 법이 잘못되어, 생각대로의 레이아웃이 되지 않고 고생했다.
나중에 또 같은 일로 고민하지 않게, 했던 순서와 좋지 않은 점을 메모해 둔다.
그리고 이 기사가 누군가를 위해 될 수 있으면 기쁩니다.

검증 화면 구성

구성 요소 구성

만든 파일

- src
    - components
        - ContinueButton.vue
    - views
        - Pj002.vue

출처

↓콘테뉴 버튼의 단일 컴포넌트

ContinueButton.vue

<template>
  <div class="continue-container">
    <p>
      CONTINUE
      <span class="continue-text">
        >
      </span>
    </p>
  </div>
</template>

↓ 메인 페이지 *콘테뉴 버튼의 스타일은 모두 코코에 쓰고 있다

Pj002.vue

<template>
  <div class="background">
    <main>
      <ContinueButton></ContinueButton>
    </main>
  </div>
</template>

<script>
import ContinueButton from '@/components/ContinueButton.vue';

export default {
  name: 'Pj002',
  components: {
    ContinueButton,
  },
};
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* Pj002.vue全体の背景 */
.background {
  height: 90%;
  position: absolute;
  top: 10%;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: lightblue;
}

/* コンテニューボタンの白いボーダーラインなどを設定 */
.continue-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 150px;
  border: 5px solid #ffffff;
  text-align: center;
  line-height: 45px;
  opacity: 1;
}

/* コンテニューボタンの文字フォントなどを設定 */
.continue-container p {
  position: absolute;
  width: 100%;
  top: 20%;
  left: 60%;
  transform: translate(-50%, -50%);
  letter-spacing: 1.6px;
  color: #ffffff;
  font: 48px/32px Bebas Neue;
  opacity: 1;
}

/* コンテニューボタンの"CONTINUE"と">"の間の余白を設定 */
.continue-text {
  text-align: left;
  margin-left: 80px;
}
</style>

<style>을 변경하면 어떻게됩니까?

<style> 그대로

외형

이상적으로.
스타일이 scoped가 되어 있지 않기 때문에, CSS는 글로벌로 정의되고 있어, 콘테뉴 버튼의 레이아웃도 문제 없게 표시된다.

<style scoped>로 설정하면

외형

변한 곳, 변하지 않은 곳

흰색 테두리 라인은 아무것도 변함없이 제대로 표시됩니다

문자 글꼴이 변경되었습니다

"CONTINUE"와 ">"사이의 여백이 없어졌습니다

<template> 의 class 속성도 위의 순서로 설정하고 있다.


서두의 결론에서 낸 것처럼, 역시 아이 컴퍼넌트의 1위의 요소는 <style scoped> 에 했음에도 불구하고 레이아웃이 적응되고 있다.
그 이하의 스타일은 적응되어 있지 않다.

그건 그렇고, <style module>

외형

변한 곳, 변하지 않은 곳

하위 컴포넌트의 스타일은 최상위 요소라도 적용되지 않습니다.　・・・!!?
(※"CONTINUE >"라는 문자열도 표시되지 않게 된 점에 대해서는 이유를 알 수 없기 때문에, 누군가 알 수 있는 분이 있으면 가르쳐 주셨으면 합니다.)

출처

class 속성의 기재 방법이 v-bind 로 바뀌므로 소스를 올려 둔다.

ContinueButton.vue

<template>
  <div :class="$style.continue_container">
    <p>
      CONTINUE
      <span :class="$style.continue_text">
        >
      </span>
    </p>
  </div>
</template>

Pj002.vue

<template>
  <div :class="$style.background">
    <main>
      <ContinueButton></ContinueButton>
    </main>
  </div>
</template>

<script>
import ContinueButton from '@/components/ContinueButton.vue';

export default {
  name: 'Pj002',
  components: {
    ContinueButton,
  },
};
</script>

<style module>
/* Pj002.vue全体の背景 */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.background {
  height: 90%;
  position: absolute;
  top: 10%;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: lightblue;
}

/* コンテニューボタンの白いボーダーラインなどを設定 */
.continue_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 150px;
  border: 5px solid #ffffff;
  text-align: center;
  line-height: 45px;
  opacity: 1;
}

/* コンテニューボタンの文字フォントなどを設定 */
.continue_container p {
  position: absolute;
  width: 100%;
  top: 20%;
  left: 60%;
  transform: translate(-50%, -50%);
  letter-spacing: 1.6px;
  color: #ffffff;
  font: 48px/32px Bebas Neue;
  opacity: 1;
}

/* コンテニューボタンの"CONTINUE"と">"の間の余白を設定 */
.continue_text {
  text-align: left;
  margin-left: 80px;
}
</style>

개발자 도구로 확인한 결과

<!-- -->

요약

<style scoped> 하지만, 아이 컴퍼넌트의 맨 위의 루트에는 스타일이 적응되어 버리므로 주의해야 한다.
일부만 반영되기 때문에 「CSS 어딘가 괴롭혀 버렸나?」라고 미세 조정하기 시작하면 늪.
공식 스타일 가이드에서 <style scoped> 의 사용은 필수 레벨에서 권장되고 있으므로, 제대로 잘 다룰 수 있게 되고 싶다.

참고:
스타일 가이드 -컴포넌트 스타일의 범위-
【Vue.js】Scoped CSS보다 CSS Modules 쪽이 베터였던 건