CSS 모듈 우아한 모드 사용법

이번에는 엘레강트 모드에서 CSS 모듈을 사용하는 방법과 엘레강트 모드에서 CSS 모듈을 사용할 때의 주의사항에 대해 알려드리겠습니다.

CSS 모듈은 각 로컬 클래스에 전역적으로 고유한 클래스 이름을 부여하므로 구성 요소 스타일이 서로 영향을 미치지 않습니다. 예:

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

다음과 같이 변환됩니다.

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

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

import styles from './button.css'
// styles = {
// button: 'buttonbutton--d8fj3',
// mini: 'buttonmini--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>

Now:

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

• styles.localClassName에 작별 인사를 할 수 있습니다

• 로컬 클래스 변경 이름은 styleName 속성에 배치되고 전역 클래스 이름은 클래스 속성에 배치됩니다. 이렇게 하면 동일한 이름 속성을 가진 로컬 클래스 이름 바인딩 구성 요소가 많이 단순화됩니다. 앞에: modifier

modifier

@button

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

이것은 다음과 동일합니다:

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

이것은 구성 요소의 스타일을 외부에서 재설정할 수 있게 해줍니다:

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

$type

<button styleName="$type">按钮</button>

이는 다음과 동일합니다:

<button :styleName="type">按钮</button>

:mini

<button styleName=":mini">按钮</button>

이것은 다음과 동일합니다:

<button :styleName="mini ? &#39;mini&#39; : &#39;&#39;">按钮</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按钮</button>

이것은 다음과 동일합니다:

<button :styleName="isDisabled ? &#39;disabled&#39; : &#39;&#39;">按钮</button>

Usage

Vue 템플릿에서 사용템플릿 외부에 CSS 모듈 도입

<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>

템플릿 내부에서 CSS 모듈 사용

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

Vue JSX에서 사용

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

Vue 렌더링 기능에서 사용

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render(h) {
 return h('button', {
  styleName: '@button :mini'
 }, '点我')
 }
}

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

추천 도서:

vue에서 구성 요소를 작성하는 방법

노드+토큰으로 검증 구현

위 내용은 CSS 모듈 우아한 모드 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!