Unable to get a scss file imported into a react component

Question

I want to get a spinner as a react component, however I am unable to apply the scss file to it

My loading.scss file is this:

$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;
      }  
   }  
}

this is my react file

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>
    </>

I am getting only a bunch of empty class divs... I came up the idea of putting those classnames as an array based on this https://stackoverflow.com/a/40824714/15277612

Answer 1

Create a new folder and move JS and SCSS files to it.

then import like followed line

import './style.scss'