Vue.js 구성 요소와 중복 된 스타일을 피할 수 있습니까?

Question

Vue (및 단일 파일 구성 요소의 개념)를 처음 사용하고 내 앱이 생성 될 때 CSS가 컴파일되는 방식을 알지 못합니다.

필자는 모든 SCSS를 내 프로젝트 용으로 컴파일 한 패턴 라이브러리가 있으므로이 구성 요소를이 구성 요소로 가져 오려고합니다. mixins와 변수를 전역 적으로로드 할 수 있다는 것을 알았습니다. 그런 다음 해당 구성 요소의 스타일을 지정하는 데 사용해야하는 경우 다른 sass 블록을 직접 선택하려고합니다.

내가되고 걱정 :

내가 여러 구성 요소에 같은 스타일 정의를 계속 사용하는 경우는, 다음은 컴파일 된 CSS에서 복제 될 것인가?

만약 그렇다면. 어떻게 피할 수 있습니까? 예 : 10 개 구성 요소에서 'headings.scss'를 가져옵니다. 컴파일 된 CSS에 'headings.scss'파일의 인스턴스가 10 개 있습니까?

나는 의미가 있기를 바랍니다. 여기에 약간의 명확성이 필요합니다.

Answer 1

그래도 중복됩니다. 하지만 vuejs webpack 템플릿을 사용하는 경우 제작 빌드의 CSS는 cssnano으로 처리되어 중복 된 CSS는 무시됩니다

참고 : 정확한 중복 만 삭제됩니다.