SASS 애니메이션 (SCSS 아님)이 작동하지 않습니다.

Question

안녕하세요! React를 통해 렌더링되는 회 전자에 대한 애니메이션을 만들려고 시도하지만 SASS에서는 작동하지 않습니다. SCSS에서는 제대로 작동합니다. 나는 여러 가지 방법으로 시도했지만 여전히 해결책이 없습니다. 회 전자는 표시되지만 움직이지는 않습니다. 누군가 아이디어가 있다면, 나에게 나와 공유 할 것을 부탁합니다.

이는 코드입니다

<div> 
    <svg className="spinner" viewBox="0 0 100 100"> 
     <path d="M 2 50 A 48 48 0 0 0 98 50 L 2 50" className="-ring1" /> 
     <path d="M 98 50 A 48 48 0 0 0 2 50 L 98 50" className="-ring2"/> 
     <circle fill="black" cx="50" cy="50" r="40" /> 
    </svg> 
    </div> 

@keyframes spinner-loading 
0% 
transform: rotateZ(0deg) 
100% 
transform: rotateZ(359deg) 

.spinner 
margin-top: 20% 
margin-left: 30% 
height: 30% 
width: 30% 
animation: spinner-loading 1.5s linear infinite 

.-ring1 
fill: white 

.-ring2 
fill: rgba(white, 0.2) 

그리고 SCSS의 버전이 : 당신은 말대꾸에서와 다른 형식 (SCS들로 변환 말대꾸가https://www.npmjs.com/package/sass-convert을 변환 할 수 있습니다

@keyframes spinner-loading { 
0%{ 
transform: rotateZ(0deg); 
} 

100%{ 
transform: rotateZ(359deg); 
    } 
} 
.spinner { 
    margin-top: 10%; 
    margin-left: 30%; 
    height: 30%; 
    width: 30%; 
    animation: spinner-loading 1.5s linear infinite; 
} 

.-ring1 { 
fill: red; 
} 

.-ring2 { 
fill: rgba(255, 0, 0, 0.2); 
} 

Answer 1

은 , css) 그래서 당신은 scss 작업 파일을 sass로 변환 할 수 있고 당신이 쓴 것을 비교하여 무엇이 잘못되었는지 확인할 수 있습니다.

그것을보고 당신이 그것을 말하는 경우가 당신의 키 프레임 규칙과 들여 쓰기 문제가 될 수있는 규칙을 제한하는 {}를 사용하는 SCS와 함께 작동 : 네, SCSS 구문 제대로 작동

@keyframes spinner-loading 
0% 
    transform: rotateZ(0deg) 
100% 
    transform: rotateZ(359deg) 

.spinner 
margin-top: 20% 
margin-left: 30% 
height: 30% 
width: 30% 
animation: spinner-loading 1.5s linear infinite 

.-ring1 
fill: white 

.-ring2 
fill: rgba(white, 0.2)