javascript - 无法在 React js 中 @use sass 文件

Question

我正在尝试使用@each 生成类

问题是如果我使用 @import "colors" 它工作正常但是当我尝试 @use "colors" as *; 然后尝试访问 colors.scss 中的变量，它告诉我该变量未定义

_colors.scss 文件夹

$colors : (
        main:(
                100:#ff0000,
                200:#eee,
                300:#eee,
                400:#eee,
                500:#eee
        ),
        sec:(
                100:#eee,
                200:#eee,
                300:#eee,
                400:#eee,
                500:#eee
        ),
        bg:(
                100:#eee,
                200:#eee,
                300:#eee,
                400:#eee,
                500:#eee
        ),
        txt:(
                100:#eee,
                200:#eee,
                300:#eee,
                400:#eee,
                500:#eee
        )
);

如果我尝试像这样在我的 app.scss 中使用它

    
:root {
  @each $color,  $shades in $colors {
    @each $shade,$value in $shades {
      .clr-#{$color}-#{$shade}{
        background-color:  #{$value};
      }
    }
  }
}

它给了我这个错误

6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss) SassError：未定义变量：“$colors”。在 C:\Users\majdee\OneDrive\prpogramming projects\Hospital 项目的第 139 行，带有 sass\front\ui\src\App.scss @each $color, $shades in $colors {

我的问题是如何@use files 是 sass with react

标签： javascriptcssreactjssassnode-sass