Vue에서 CSS 모듈을 사용하는 방법

이 글은 주로 Vue에서 CSS 모듈을 사용하는 우아한 방법을 소개합니다. 이 글의 텍스트는 예제 코드와 결합되어 매우 자세하게 소개됩니다. 필요한 친구는 이를 참조할 수 있습니다.

CSS 모듈: 로컬 범위 & 모듈화

CSS 모듈 구성 요소 스타일이 서로 영향을 미치지 않도록 각 로컬 클래스에 전역적으로 고유한 클래스 이름을 지정합니다. 예:

/* button.css */
.button {
 font-size: 16px;
}
.mini {
 font-size: 12px;
}

다음과 같이 변환됩니다.

/* button.css */
.button__button--d8fj3 {
 font-size: 16px;
}
.button__mini--f90jc {
 font-size: 12px;
}

CSS 모듈 파일을 가져올 때 로컬 클래스 이름을 전역 클래스 이름으로 매핑하는 개체를 제공합니다.

import styles from './button.css'
// styles = {
// button: 'button__button--d8fj3',
// mini: 'button__mini--f90jc'
// }
element.innerHTML = '<button class="&#39; + styles.button + &#39; &#39; + styles.mini + &#39;" />'

vue-css-modules: 단순화된 클래스 이름 매핑

여기 CSS 모듈을 사용하는 버튼 구성 요소가 있습니다.

<template>
 <button :class="{
 &#39;global-button-class-name&#39;: true,
 [styles.button]: true,
 [styles.mini]: mini
 }">点我</button>
</template>
<script>
 import styles from './button.css'
 export default {
 props: { mini: Boolean },
 data: () => ({ styles })
 }
</script>

실제로 CSS 모듈은 Vue 구성 요소에 좋은 선택입니다. 하지만 다음과 같은 단점도 있습니다.

• 데이터에 스타일을 전달해야 합니다

• 글로벌 클래스 이름을 가져오려면 styles.localClassName을 사용해야 합니다.

• 다른 글로벌 클래스 이름이 있으면 반드시 넣어야 합니다. Together

• 컴포넌트의 속성 값에 바인딩하려면 로컬 클래스 이름과 속성 이름이 동일하더라도 명시적으로 지정해야 합니다

위의 버튼 컴포넌트의 경우 vue- css-modules:

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

현재:

• 데이터에 스타일을 전달할 필요는 없지만 믹스인에 스타일을 전달해야 합니다.

  styleName 속성에 로컬 클래스 이름을 넣고, 전역 클래스 이름은 클래스 속성에 배치됩니다. 이는 많은

• 이름 속성이 동일한 로컬 클래스 이름 바인딩 구성 요소를 규제합니다. 그 앞에 modifier
를 추가하면 됩니다. ㅋㅋㅋ ㅋㅋㅋ

<button styleName="@button">按钮</button>

Vue JSX에서 사용

<button styleName="button" data-component-button="true">按钮</button>

Render in Vue 함수에서

.form [data-component-button] {
 font-size: 20px;
}

를 사용하세요. 위 내용은 모두의 학습에 도움이 되기를 바랍니다. 중국사이트!

관련 권장 사항:

트리 메뉴를 구현하는 Vue.js 재귀 구성 요소vue-cli에서 스타일러스를 사용할 수 없는 문제를 해결하는 방법

위 내용은 Vue에서 CSS 모듈을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!