이 기사에서는 범위가 지정된 CSS와 CSS 모듈의 차이점에 대한 관련 지식을 제공합니다. 범위가 지정된 CSS와 CSS 모듈은 모두 CSS의 로컬 범위를 제어하고 클래스 이름 중복과 같은 문제를 방지하는 데 사용됩니다. ? 모두에게 도움이 되길 바랍니다.
scoped CSS와 CSS 모듈은 모두 CSS의 로컬 범위를 제어하고 클래스 이름 중복과 같은 문제를 방지하도록 설계되었습니다. 그렇다면 둘 사이의 차이점은 무엇입니까?
1.1 설명
모든 클래스 이름에 대해 클래스 이름을 다시 생성하여 CSS 가중치 및 클래스 이름 중복 문제를 효과적으로 방지합니다. CSS 모듈은 클래스 이름을 직접 대체하여 사용자가 클래스 이름을 설정하여 구성 요소 스타일에 영향을 미칠 가능성을 제거하므로 이름 지정을 위해 머리를 숙일 필요가 없습니다.
1.2 구현 원리
스타일 이름에 해시 문자열 접미사를 추가하면 특정 범위 컨텍스트에서 컴파일된 스타일이 전역적으로 고유할 수 있습니다.
1.3 사용법
//webpack.base.conf.jsmodule: { rules: [ // ... 其它规则省略 { test: /\.css$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { // 开启 CSS Modules modules: true, // 自定义生成的类名 localIdentName: '[local]_[hash:base64:8]' } } ] } ] }
<style module>.red { color: red;}.bold { font-weight: bold;}</style>
<template> <p :class="$style.red"> This should be red </p></template><template> <p> <p :class="{ [$style.red]: isRed }"> Am I red? </p> <p :class="[$style.red, $style.bold]"> Red and bold </p> </p></template>
<script>export default { created () { console.log(this.$style.red) // -> "red_1VyoJ-uZ" // 一个基于文件名和类名生成的标识符 }}</script>
1.4
<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;}
1.5 Notes
Vue는 고유성을 보장하고 스타일을 사유화하고 모듈화하는 목적을 달성하기 위해 DOM 구조와 CSS 스타일에 고유하고 반복되지 않는 태그를 추가합니다. CSS 가중치 및 클래스 이름 중복 문제를 완전히 피하는 것은 불가능합니다.
2.2 사용 방법
< 스타일 > 태그에 scoped
속성 추가 2.3 효과 사용 <style scoped>h1 {
color: #f00;}</style>
h1[data-v-4c3b6c1c] { color: #f00;}
사용자가 동일하게 정의한 경우 다른 곳에서는 클래스 이름이 여전히 구성 요소의 스타일에 영향을 미칠 수 있습니다.
위 내용은 CSS 범위에서 범위가 지정된 CSS와 CSS 모듈의 차이점에 대한 자세한 답변의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!