집 > 기사 > 웹 프론트엔드 > vue에서 CSS를 사용하여 범위를 모듈로 바꾸는 방법은 무엇입니까?

vue에서 CSS를 사용하여 범위를 모듈로 바꾸는 방법은 무엇입니까?

亚连원래의: 2018-05-31 14:11:011720검색

이 글에서는 Vue에서 Cropped를 대체하기 위해 CSS 모듈을 사용하는 방법을 주로 소개하고 참고용으로 올려드립니다.

앞서 언급했듯이

css 모듈은 CSS를 모듈화하고 결합하는 데 널리 사용되는 시스템입니다. vue-loader는 범위가 지정된 CSS의 대안으로 CSS 모듈과의 통합을 제공합니다. 이 글에서는 CSS 모듈을 자세히 소개하겠습니다

소개

처음 Vue를 사용하기 시작했을 때 범위 지정 기술이 옹호되어 널리 사용되었습니다

<style scoped>
 @media (min-width: 250px) {
  .list-container:hover {
   background: orange;
  }
 }
</style>

이 선택적 범위 지정 속성은 고유한 속성(예: data-v)을 자동으로 추가합니다. -21e5b78) 컴파일 시 .list-container:hover는 .list-container[data-v-21e5b78]:hover

와 같이 컴파일됩니다. 그러나 충돌을 완전히 피할 수는 없습니다.

<span data-v-0467f817 class="errShow">用户名不得为空</span>

위 코드를 예로 들면, 범위 지정을 사용한 후 요소에 고유 속성 'data-v-0467f817'을 추가하고 CSS 스타일은 다음과 같이 컴파일됩니다.

.errShow[data-v-0467f817] {
  font-size: 12px;
  color: red;
}

그러나 사용자가 errShow 클래스 이름은 errShow 클래스 이름으로 정의된 모든 구성 요소의 표시에 영향을 미칩니다

그리고 CSS 모듈은 속성을 추가하지 않고 클래스 이름을 직접 변경합니다

<span class="_3ylglHI_7ASkYw5BlOlYIv_0">用户名不得为空</span>

이것은 충돌 가능성을 크게 줄입니다. 기본적으로 구성 요소 표시에 영향을 주지 않는 범위 태그의 스타일을 사용자가 직접 설정합니다.

모듈화

CSS 모듈은 공식 표준도 아니고 브라우저 기능도 아니지만 빌드의 CSS 클래스 이름 선택기입니다. 단계 범위를 제한하는 방법입니다(해시를 통해 네임스페이스와 유사한 메서드 구현). 클래스 이름은 동적으로 생성되고 고유하며 소스 파일의 각 클래스 스타일과 정확하게 일치합니다.

사실 CSS 모듈은 CSS 모듈화의 한 방법일 뿐입니다. 왜 CSS 모듈성이 필요한가요?

CSS 규칙은 전역적이며 모든 구성 요소의 스타일 규칙은 전체 페이지에 유효합니다. 따라서 시급히 해결해야 할 것은 스타일 갈등(오염) 문제이다. 일반적으로 충돌을 해결하려면 충돌 가능성을 줄이기 위해 클래스 이름을 더 길게 작성하고, 범위를 제한하기 위해 상위 요소의 선택자를 추가합니다.

CSS 모듈화는 이 문제를 해결하는 것입니다. 일반적으로 세 가지 클래스로 나뉩니다.

1. 명명 규칙 클래스

이러한 유형의 CSS 모듈러 솔루션은 주로 BEM, 물론 OOCSS를 표준화하는 데 사용됩니다. , 대부분은 CSS 명명에 관한 것이었습니다. JS에서 CSS를

CSS를 완전히 버리고 자바스크립트를 사용하여 CSS 규칙을 작성하세요.

3. JS를 사용하여 스타일을 관리하세요. 기본 CSS 파일을 컴파일하는 JS 가장 일반적인 모듈 기능은 CSS 모듈입니다

빌드 도구가 증가함에 따라 점점 더 많은 사람들이 CSS를 작성할 때 후자의 두 솔루션을 사용하기 시작하고 있습니다. 스타일 충돌. 합의된 형식으로 코드를 작성하면 됩니다

작성 방법

다음은 CSS 모듈 작성 방법을 소개합니다스타일 태그에 모듈 속성을 추가하여 CSS-로더의 모듈 모드를 활성화합니다

<style module>
.red {color: red;}</style>

동적 사용 템플릿 클래스 바인딩: class, 클래스 이름 앞에 '$style'을 붙입니다.

<template>
 <p :class="$style.red">
  This should be red
 </p>
</template>

클래스 이름에 밑줄이 포함된 경우 대괄호 구문을 사용하세요

<h4 :class="$style[&#39;header-tit&#39;]">类别推荐</h4>

배열이나 객체 구문을 사용할 수도 있습니다

  <p :class="{ [$style.red]: isRed }">
   Am I red?
  </p>
  <p :class="[$style.red, $style.bold]">
   Red and bold
  </p>

더 복잡한 경우 객체 구문

  <ul 
　　　 :class="{
    [$style.panelBox]:true,
    [$style.transitionByPanelBox]:needTransition
   }"

더 복잡한 배열 구문

  <li
   :class="[
    $style[&#39;aside-item&#39;],
    {[$style[&#39;aside-item_active&#39;]]:(i === index)}
   ]"

Configuration

css-loader CSS 모듈의 기본 구성은 다음과 같습니다

{
 modules: true,
 importLoaders: 1,
 localIdentName: &#39;[hash:base64]&#39;
}

vue-loader의 cssModules 옵션을 사용하여 css-loader의 구성을 사용자 정의할 수 있습니다

module: {
 rules: [
  {
   test: &#39;\.vue$&#39;,
   loader: &#39;vue-loader&#39;,
   options: {
    cssModules: {
     localIdentName: &#39;[path][name]---[local]---[hash:base64:5]&#39;,
     camelCase: true
    }
   }
  }
 ]
}

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

vue에서 CSS를 사용하여 범위를 모듈로 바꾸는 방법은 무엇입니까?

관련 기사