sass，用 react+vite 定义的 scss 变量

Question

问题

你好。 我正在尝试导入在 App.tsx 中有许多 scss 文件的 main.scss

但是，导入已正确应用。 变量未定义发生错误。

这是我的 main.scss 和 _color.scss，_helper.sass

//main.scss
@import './_color', './_helper';

// _color.scss
// Key
$shade100: #f9fbff;
$shade200: #f0f4fa;
$shade300: #dbe2ef;
$shade400: #afbacf;
$shade500: #8895ac;
$shade600: #5f6e8c;
$shade700: #4c5b7a;
$shade800: #2b3649;
$shade900: #131924;

$white: #ffffff;

$light-primaryFont: #0053f4;
$light-primary: #0053f4;
$light-secondaryFont: #142c67;
$light-secondary: #142c67;
$light-accentFont: #d40fa0;
$light-accent: #d40fa0;
$light-purpleFont: #7209b7;
$light-purple: #9626ee;
$light-orangeFont: #ff8f1f;
$light-orange: #ff8f1f;
$light-red: #f54a25;
$light-redFont: #f54a25;
$light-yellow: #ffac0b;
$light-yellowFont: #ffac0b;
$light-warningFont: #9b6616;
$light-warning: #ffac0b;
$light-errorFont: #dc072e;
$light-error: #f7254b;
$light-successFont: #007d59;
$light-success: #007d59;
$light-skyblue: #04a0f8;
$light-skyblueFont: #04a0f8;
$light-infoFont: #3756e4;
$light-info: #3756e4;

$dark-primaryFont: #0085ff;
$dark-primary: #0085ff;
$dark-secondaryFont: #635ff9;
$dark-secondary: #635ff9;
$dark-accentFont: #f35ca5;
$dark-accent: #f35ca5;
$dark-red: #ff563f;
$dark-orange: #ff8f1f;
$dark-yellow: #ffac0b;
$dark-purpleFont: #cb89ff;
$dark-purple: #9626ee;
$dark-orangeFont: #ffa048;
$dark-orange: #ff7a00;
$dark-warningFont: #ffc90b;
$dark-warning: #ffac0b;
$dark-errorFont: #ff4d5d;
$dark-error: #ff4d5d;
$dark-successFont: #0dd481;
$dark-success: #0dd481;
$dark-skyblue: #04a0f8;
$dark-infoFont: #70a0ff;
$dark-info: #4b6eea;

$theme: (
  light: (
    'white': #ffffff,
    'shade100': $shade100,
    'shade200': $shade200,
    'shade300': $shade300,
    'shade400': $shade400,
    'shade500': $shade500,
    'shade600': $shade600,
    'shade700': $shade700,
    'shade800': $shade800,
    'shade900': $shade900,
    'reverse54': rgba($shade100, 0.54),
    'reverse12': rgba($shade100, 0.12),
    'reverse05': rgba($shade100, 0.05),
    'reverse02': rgba($shade100, 0.02),
    'opacity54': rgba($shade900, 0.54),
    'opacity12': rgba($shade900, 0.12),
    'opacity05': rgba($shade900, 0.05),
    'opacity02': rgba($shade900, 0.02),
    'primaryFont': $light-primaryFont,
    'primary100': $light-primary,
    'primary87': rgba($light-primary, 0.87),
    'primary54': rgba($light-primary, 0.54),
    'primary30': rgba($light-primary, 0.3),
    'primary12': rgba($light-primary, 0.12),
    'secondaryFont': $light-secondaryFont,
    'secondary100': $light-secondary,
    'secondary54': rgba($light-secondary, 0.54),
    'secondary30': rgba($light-secondary, 0.3),
    'secondary12': rgba($light-secondary, 0.12),
    'accentFont': $light-accentFont,
    'accent100': $light-accent,
    'accent54': rgba($light-accent, 0.54),
    'accent30': rgba($light-accent, 0.3),
    'accent12': rgba($light-accent, 0.12),
    'purpleFont': $light-purpleFont,
    'purple100': $light-purple,
    'purple12': rgba($light-purple, 0.12),
    'orangeFont': $light-orangeFont,
    'orange100': $light-orange,
    'orange12': rgba($light-orange, 0.12),
    'warningFont': $light-warningFont,
    'warning100': $light-warning,
    'warning12': rgba($light-warning, 0.12),
    'errorFont': $light-errorFont,
    'error100': $light-error,
    'error12': rgba($light-error, 0.12),
    'successFont': $light-successFont,
    'success100': $light-success,
    'success12': rgba($light-success, 0.12),
    'infoFont': $light-infoFont,
    'info100': $light-info,
    'info12': rgba($light-info, 0.12),
    'red100': $light-red,
    'red12': rgba($light-red, 0.12),
    'yellow100': $light-yellow,
    'yellow12': rgba($light-yellow, 0.12),
    'skyblue100': $light-skyblue,
    'skyblue12': rgba($light-skyblue, 0.12),
  ),
  dark: (
    'white': #ffffff,
    'shade100': $shade900,
    'shade200': $shade800,
    'shade300': $shade700,
    'shade400': $shade600,
    'shade500': $shade500,
    'shade600': $shade400,
    'shade700': $shade300,
    'shade800': $shade200,
    'shade900': $shade100,
    'reverse54': rgba($shade900, 0.54),
    'reverse12': rgba($shade900, 0.12),
    'reverse05': rgba($shade900, 0.05),
    'reverse02': rgba($shade900, 0.02),
    'opacity54': rgba($shade100, 0.54),
    'opacity12': rgba($shade100, 0.12),
    'opacity05': rgba($shade100, 0.05),
    'opacity02': rgba($shade100, 0.02),
    'primaryFont': $dark-primaryFont,
    'primary100': $dark-primary,
    'primary87': rgba($dark-primary, 0.87),
    'primary54': rgba($dark-primary, 0.54),
    'primary30': rgba($dark-primary, 0.3),
    'primary12': rgba($dark-primary, 0.12),
    'secondaryFont': $dark-secondaryFont,
    'secondary100': $dark-secondary,
    'secondary54': rgba($dark-secondary, 0.54),
    'secondary30': rgba($dark-secondary, 0.3),
    'secondary12': rgba($dark-secondary, 0.12),
    'accentFont': $dark-accentFont,
    'accent100': $dark-accent,
    'accent54': rgba($dark-accent, 0.54),
    'accent30': rgba($dark-accent, 0.3),
    'accent12': rgba($dark-accent, 0.12),
    'purpleFont': $dark-purpleFont,
    'purple100': $dark-purple,
    'purple12': rgba($dark-purple, 0.12),
    'orangeFont': $dark-orangeFont,
    'orange100': $dark-orange,
    'orange12': rgba($dark-orange, 0.12),
    'warningFont': $dark-warningFont,
    'warning100': $dark-warning,
    'warning12': rgba($dark-warning, 0.12),
    'errorFont': $dark-errorFont,
    'error100': $dark-error,
    'error12': rgba($dark-error, 0.12),
    'successFont': $dark-successFont,
    'success100': $dark-success,
    'success12': rgba($dark-success, 0.12),
    'infoFont': $dark-infoFont,
    'info100': $dark-info,
    'info12': rgba($dark-info, 0.12),
    'red100': $dark-red,
    'red12': rgba($dark-red, 0.12),
    'yellow100': $dark-yellow,
    'yellow12': rgba($dark-yellow, 0.12),
    'skyblue100': $dark-skyblue,
    'skyblue12': rgba($dark-skyblue, 0.12),
  ),
);

@each $name, $map in $theme {
  .theme-#{$name} {
    @each $key, $value in $map {
      --#{$key}: #{$value};
    }
  }
}

// _helper.sass
// Font color
@each $name, $map in $theme
    @each $key, $value in $map
        .font-#{$key}
            color: var(--#{$key}) !important

// BG color
@each $name, $map in $theme
    @each $key, $value in $map
        .bg-#{$key}
            background-color: var(--#{$key}) !important
            background-size: cover

浏览器未检测到主题变量。

我所做的

1. color.scss, helper.sass => _color.scss, _helper.sass
2. 我将所有@each 代码放在帮助器中进行着色