无法将 scss 文件导入到反应组件中

Question

我想获得一个微调器作为反应组件，但是我无法将 scss 文件应用到它

我的 loading.scss 文件是这样的：

$color: #e14eca;
$size: 12px;
$time: 1;

main {
   display: flex;
   justify-content: center;
   align-items: center;
   background: none;
}

.dank-ass-loader {
   display: flex;
   flex-direction: column;
   align-items: center;
   
   .row {
      display: flex;
   }
}

.arrow {
   width: 0; 
   height: 0;
   margin: 0 (-$size / 2);
   border-left: $size solid transparent;
   border-right: $size solid transparent;
   border-bottom: ($size * 1.8) solid $color;
   animation: blink $time + s infinite;
   filter: drop-shadow(0 0 ($size * 1.5) $color);
    
   &.down {
      transform: rotate(180deg);
   }
   
   @for $i from 1 through 18 {
      &.outer#{$i} {
         animation-delay: -($time / 18) * $i + s;
      }  
   }

   @for $i from 1 through 6 {
      &.inner#{$i} {
         animation-delay: -($time / 6) * $i + s;
      }  
   }  
}

这是我的反应文件

import React from "react";
import styles from "loading.scss";



 const Spinner = () => {
      return (
        <>  <main>
        <div
          className="dank-ass-Spinner"
          style={{
            position: "fixed",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            top: "50%",
            right: "50%",
            left: "50%",
            zIndex: "99999",
            bottom: "50%"
          }}
        ><div className={styles.row} style={{ flexWrap: "nowrap" }}>
            <div
              className={[
                styles.arrow,
                styles.up,
                styles.outer,
                styles.outer18
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.down,
                styles.outer,
                styles.outer17
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.up,
                styles.outer,
                styles.outer16
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.down,
                styles.outer,
                styles.outer15
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.up,
                styles.outer,
                styles.outer14
              ].join(" ")}
            ></div>
          </div>
          <div className={styles.row} style={{ flexWrap: "nowrap" }}>
            <div
              className={[
                styles.arrow,
                styles.up,
                styles.outer,
                styles.outer1
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.down,
                styles.outer,
                styles.outer2
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.up,
                styles.inner,
                styles.inner6
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.down,
                styles.inner,
                styles.inner5
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.up,
                styles.inner,
                styles.inner4
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.down,
                styles.outer,
                styles.outer13
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.up,
                styles.outer,
                styles.outer12
              ].join(" ")}
            ></div>
          </div>
          <div className={styles.row} style={{ flexWrap: "nowrap" }}>
            <div
              className={[
                styles.arrow,
                styles.down,
                styles.outer,
                styles.outer3
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.up,
                styles.outer,
                styles.outer4
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.down,
                styles.inner,
                styles.inner1
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.up,
                styles.inner,
                styles.inner2
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.down,
                styles.inner,
                styles.inner3
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.up,
                styles.outer,
                styles.outer11
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.down,
                styles.outer,
                styles.outer10
              ].join(" ")}
            ></div>
          </div>
          <div className={styles.row}  style={{ flexWrap: "nowrap" }}>
            <div
              className={[
                styles.arrow,
                styles.down,
                styles.outer,
                styles.outer5
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.up,
                styles.outer,
                styles.outer6
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.down,
                styles.outer,
                styles.outer7
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.up,
                styles.outer,
                styles.outer8
              ].join(" ")}
            ></div>
            <div
              className={[
                styles.arrow,
                styles.down,
                styles.outer,
                styles.outer9
              ].join(" ")}
            ></div>
          </div>
        </div>
      </main>
    </>

我只得到一堆空的类 div... 我想出了将这些类名作为基于此 https://stackoverflow.com/a/40824714/15277612

的数组的想法