Vue에서 범위가 지정된 CSS와 CSS 모듈을 사용하는 것의 차이점은 무엇입니까?

이번에는 Vue모듈에서 범위가 지정된 CSS와 CSS를 사용할 때의 차이점과 Vue에서 범위가 지정된 CSS 및 CSS 모듈을 사용할 때 주의사항에 대해 알려드리겠습니다.

scoped css

공식 문서

scoped css는 실행 중인 vue 프로젝트에서 직접 사용할 수 있습니다.

사용법:

<style scoped>
h1 {
 color: #f00;
}
</style>

지역 스타일을 구분하기 위해 범위 지정을 사용한 컴파일 결과는 다음과 같습니다.

h1[data-v-4c3b6c1c] {
 color: #f00;
}

즉, 차별화를 위해 요소에 고유한 속성이 추가됩니다.

단점

1. 사용자가 다른 곳에서 동일한 클래스 이름을 정의하면 여전히 구성 요소의 스타일에 영향을 미칠 수 있습니다.

2. CSS 스타일 우선순위의 특성에 따라 범위 처리는 각 스타일의 가중치를 증가시킵니다.

이론적으로 이 스타일을 수정하려면 이 스타일을 커버하기 위해 더 높은 가중치가 필요합니다.

그래서 범위가 포함된 타사 플러그인을 참조 할 때 스타일을 수정해야 하는 경우 전체적으로 수정해야 하며 가중치 문제에 주의해야 하며 0.0에서는 !important를 사용할 수밖에 없습니다. .

3. 구성 요소에 다른 구성 요소가 포함되어 있으면 현재 구성 요소의 데이터 속성만 다른 구성 요소의 가장 바깥쪽 태그에 추가됩니다.

따라서 일반적으로 상위 구성 요소의 범위가 지정되면 하위 구성 요소보다 더 좋습니다. 자체 스타일을 설정합니다. 가장 바깥쪽 태그를 제외한 구성 요소의 내부 태그의 가중치는 낮으며 스타일에 영향을 주지 않습니다.

그러나 다음 방법의 영향을 받을 수도 있습니다.

넷째, 범위를 지정하면 태그 선택기 렌더링이 여러 배 느려집니다.

공식에서는 다음과 같이 몇 가지 예방 조치를 취했습니다.

us 태그 선택기를 사용할 때 범위가 지정되면 성능이 심각하게 저하되지만 클래스나 ID를 사용하면 성능이 크게 저하된다는 것을 알 수 있습니다.

css 모듈

공식 문서

css 모듈이 적용되려면 CSS-로더 구성을 추가해야 합니다. 자세한 내용은 문서 구현을 참조하세요.

Note

style-loader를 사용하는 경우 구성을 적용하려면 문서에 설명된 대로 vue-style-loader로 변경해야 합니다.

두 가지의 차이점은 여기서 확인할 수 있습니다. vue-style-loader

는 다음과 같이 사용됩니다.

<template>
 <p :class="$style.gray">
 Im gray
 </p>
</template>
<style module>
.gray {
 color: gray;
}
</style>

모듈을 사용한 결과는 다음과 같이 컴파일됩니다.

<p class="gray_3FI3s6uz">Im gray</p>
.gray_3FI3s6uz {
 color: gray;
}

CSS 모듈을 직접 작성한 것을 볼 수 있습니다. 사용자 설정 클래스를 제외하고 클래스 이름을 대체합니다. 이름이 구성 요소의 스타일에 영향을 미칠 가능성이 있습니다.

이런 식으로 $style.red를 변수로 사용할 수 있으며, 다음과 같이 js에서 사용할 수 있습니다.

<script>
export default {
 created () {
 console.log(this.$style.gray)
 // -> "gray_3FI3s6uz"
 // 一个基于文件名和类名生成的标识符
 }
}
</script>

모듈을 사용하면 더 많은 바인딩과 $style이 있음을 알 수 있습니다. 우아합니다. 이 vue-css-modules를 살펴보세요.

키프레임에서 CSS 모듈 사용 시 문제

CSS 모듈을 사용하여 animation애니메이션의 키프레임을 처리하려면 애니메이션 이름을 먼저 작성해야 합니다.

animation: ani 1s;는 정상적으로 컴파일될 수 있지만 animation: 1s ani;는 예상대로 컴파일되지 않으므로 CSS 매개변수의 올바른 작성 순서를 개발하는 것도 중요합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

webpack+react 개발 환경 구축 방법

Node.js Buffer 사용에 대한 자세한 설명

React 패밀리 버킷 환경 구축 방법

위 내용은 Vue에서 범위가 지정된 CSS와 CSS 모듈을 사용하는 것의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!