Dva: CSS 모듈 컴파일 문제

에 만든 2016년 11월 29일 · 2코멘트 · 출처: dvajs/dva

키 프레임을 사용할 때 css-modules에서 다음과 같은 문제가 발견되었습니다.

원래 CSS 코드 :

<strong i="7">@keyframes</strong> rotating {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.rotating-item {
  animation: 5s linear 0 infinite rotating;
}

다음 코드로 컴파일됩니다.

@-webkit-keyframes rotating___3vsQl {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
<strong i="11">@keyframes</strong> rotating___3vsQl {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.rotating-item___3pALh {
  -webkit-animation: 5s linear 0 infinite :local(rotating);
          animation: 5s linear 0 infinite :local(rotating);
}

올바른 것은 다음과 같아야한다고 생각합니다.

@-webkit-keyframes rotating___3vsQl {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
<strong i="15">@keyframes</strong> rotating___3vsQl {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.rotating-item___3pALh {
  -webkit-animation: 5s linear 0 infinite rotating___3vsQl;
          animation: 5s linear 0 infinite rotating___3vsQl;
}

css-modules 버그인지 아니면 webpack의 구성 문제인지 모르겠습니다.

노트 :
dva-cli로 생성 된 프로젝트는 웹팩 구성을 수정하지 않았습니다.
처음에는 덜 썼는데 css로 바꾸면 안되네요.
글이 적을 경우 <strong i="25">@keyframes</strong> :global(rotating) 가 오류를보고 함을 나타냅니다.
도구 버전은 다음과 같습니다.
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

question

출처

linkeo

가장 유용한 댓글

감사합니다 🙏!

예, 괜찮습니다.하지만 문제는

animation: name .6s ease; // 这样是可以的
animation: .6s ease name; // 而这样就不会被识别到了

mozilla의 문서에 움푹 패였습니다 😂

<single-animation> = <time> || <single-timing-function> || 
<time> || <single-animation-iteration-count> || <single-
animation-direction> || <single-animation-fill-mode> || 
<single-animation-play-state> || [ none | <keyframes-name> ]


/* <strong i="11">@keyframes</strong> duration | timing-function | delay | 
  iteration-count | direction | fill-mode | play-state | name */
 animation: 3s ease-in 1s 2 reverse both paused slidein;

/* <strong i="12">@keyframes</strong> duration | timing-function | delay | name */
 animation: 3s linear 1s slidein;

/* <strong i="13">@keyframes</strong> duration | name */
 animation: 3s slidein;

linkeo 에 2016년 12월 06일

👍6

모든 2 댓글

https://github.com/css-modules/css-modules/issues/141#issuecomment -243011699
이것이 문제를 해결할 수 있습니까?

sorrycc 에 2016년 12월 05일

👍1