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

Posted 2023-02-22

【中文标题】无法将 scss 文件导入到反应组件中

【英文标题】：Unable to get a scss file imported into a react component

【发布时间】：2021-08-21 20:33:58

【问题描述】：

我想获得一个微调器作为反应组件，但是我无法将 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://***.com/a/40824714/15277612

的想法

【问题讨论】：

如果您想使用 CSS 模块，请将您的文件重命名为 loading.module.scss。并尝试使用camelCase naming。

谢谢你，@AjeetShah...你拯救了我的一天

【参考方案1】：

创建一个新文件夹并将 JS 和 SCSS 文件移动到其中。

然后像后续行一样导入

import './style.scss'