공통으로 사용하는 css 파일 적용은 어떻게..?

[Yejin0O0]

왜 이제서야 이 문제를 생각했는지 모르겠다.

공통으로 사용하는 css파일은 어떻게 효율적으로 관리할 수 있을까.

지금은 cdn으로 css 를 import하고 있는데, cdn이 안될경우를 대비하여 css import 부분을 변수 처리하는 방식도 고려해봐야한다..!(동현 idea)

[Yejin0O0]

https://www.inflearn.com/questions/320514

안녕하세요 R&D님, 보통 실무에서는 공통 스타일 시트를 로딩해서 사용합니다. 아마 로드맵 따라서 가시다 보면 후반부 강의에서 해당 내용을 다룰 것 같아요. 공통 스타일 시트는 App 컴포넌트의 스타일에 scoped 없이 @import './css/main.css' 요런 식으로 로딩합니다 :)

[Yejin0O0]

css import 변수 처리 어떻게 하는지도 찾아봐야할듯

style에 scoped가 별 의미 없는 줄 알았는데, 위의 내용을 보고 꽤 의미 있는 역할을 하고 있다는 느낌이 듦.

scoped가 어떤 역할을 하는지도 알아봐야할듯

[Yejin0O0]

<style> 태그가 scoped 속성을 가지고있을 때, CSS는 현재 컴포넌트의 엘리먼트에만 적용됩니다.

범위가 지정된 스타일과 범위가 지정되지 않은 스타일은 동일한 컴포넌트에 포함 할 수 있습니다.

하위 컴포넌트의 선택자 사용을 조심하세요! 선택자 .a .b가 있는 CSS 규칙의 경우 .a와 일치하는 요소에 하위 컴포넌트가 포함되어 있을 경우 해당 하위 컴포넌트의 모든 .b가 CSS 규칙에 적용됩니다.

참고 url: https://vue-loader-v14.vuejs.org/kr/features/scoped-css.html

[Yejin0O0]

cdn이 안될 때를 대비한 css import를 걱정하고 있는거라면, 애초에 import를 cdn/local 2개로 하면 되지 않나? (태영 idea)

[Yejin0O0]

app.vue / index.html / 에 cdn css import했는데, 일부 css만 적용이 된다. 이유가 뭘까...?

[Yejin0O0]

index.html의 header가 아닌 body에 import했더니 모든 css 가 적용이 되었다. 이유가 뭘까..?

[Yejin0O0]

태영오빠의 도움으로 문제를 원인을 알 수 있었다. 바로, 동일 class 사용으로 인한 css 충돌로 인한 우선순위때문이었다.

container 라는 클래스 명은 매우 흔한 클래스 명으로 외부 css 를 여러개 import한다면 충분히 충돌할 수 있는 일이었다. 충돌로 인해 css 적용 우선순위가 모호해졌고 적용안되는 스타일이 존재한 것이다.

우리의 프로젝트는 외부 css를 이용하는 것이 매우 많으므로, container를 커스텀화하기는 좀 어려울것이라 생각했다.

그래서 우선순위를 조정하는 방향으로 진행했다. 적용이 안되는 css 파일을 찾고, 그 파일만 body에서 import하는 것으로 변경했다.

문제 해결 완료!

[Yejin0O0]

css class name 정의의 중요성을 다시 한번 알게되었다!