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のバージョンがあります：

@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

あなたが異なるフォーマット（SCSS、SASSからとに変換しhttps://www.npmjs.com/package/sass-convertを変換サスを使用することができます、css）ので、scss作業ファイルをsassに変換し、あなたが書いたものと比較して何が間違っているかを確認することができます。

それを見て、あなたはそれがあなたのキーフレームのルールとインデントの問題になることがあり、ルールを制限する{}を使用しています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)