집 > 기사 > 웹 프론트엔드 > Vue에서 범위가 지정된 CSS와 CSS 모듈을 사용하는 것의 차이점은 무엇입니까?

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!