SCSS：带有：导出的根部分

Question

我有

test.module.scss

文件，其中存储了所有颜色、版式等变量。我希望能够在

react

组件中使用它。问题是文件顶部有

:root

可以定义变量，它看起来像这样：

:root{
  --color-white: #fff;
  --color-black: #000;
  //...rest colors
}

我希望能够在此处使用

:export

在我的反应组件中使用这些颜色。如何在此处添加它以免破坏代码？ 我试过：

:root{
  :export{
     --color-white: #fff;
     --color-black: #000;
     //...rest colors
  }
}

或

 :export{
      :root{
         --color-white: #fff;
         --color-black: #000;
         //...rest colors
      }
    }

甚至：

:root:export{
    :root{
       --color-white: #fff;
       --color-black: #000;
       //...rest colors
     }
}

或其他一些情况，如

:root + :export

等。 但没有任何东西按预期工作，变量无法从反应组件访问或者它们不可导出。导出的方式是什么？我知道我可以在 scss 文件末尾添加

:export

并再次将所有变量放在那里，但它们会加倍，这不是我想要使用的方式。

Answer 1

我做了这样的事情：

在单独的

.modules.scss

文件中定义颜色，并删除潜在的破折号以确保变量在 JS 中正常工作。

colors.module.scss：

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

$colors: (
  color-primary: #4EB96C,
  color-accent: #EF5B27,
  color-neutral: #29324E,

  gray-25: #FCFCFD,
  gray-50: #F9FAFB,
  gray-100: #EEF0F5,
  gray-200: #DADFEA,
  gray-300: #B9C0D4,
  gray-400: #7D8EAF,
  gray-500: #5D7398,
  gray-600: #4F617F,
  gray-700: #455770,
  gray-800: #38485C,
  gray-900: #263547,
  orange-50: #FFE9E4,
  orange-100: #FFDBD2,
  orange-600: #E84D2A,
  orange-700: #C44023,
  blue-50: #EFF8FF,
  blue-100: #D1E9FF,
  blue-500: #2E90FA,
  blue-700: #175CD3,

  violet-50: #F5F3FF,
  violet-500: #875BF7,
  violet-700: #6927DA,

  primary-25: #F6FBF8,
  primary-50: #E4F3EC,
  primary-100: #CCEDDD,
  primary-200: #ADE3C8,
  primary-300: #88D7AF,
  primary-400: #61C995,
  primary-500: #2EB672,
  primary-600: #289E63,
  primary-700: #208251,
  primary-800: #1A6640,
  primary-900: #134C30,

  secondary-25: #FFF8F6,
  secondary-50: #FFE9E4,
  secondary-100: #FFDBD2,
  secondary-200: #FFC5B8,
  secondary-300: #FFAB99,
  secondary-400: #FE8A70,
  secondary-500: #FA6341,
  secondary-600: #E84D2A,
  secondary-700: #C44023,
  secondary-800: #9F361F,
  secondary-900: #762817,

  success-25: #FBFDF7,
  success-50: #F5FBEE,
  success-100: #E7F4D7,
  success-200: #CFEAB0,
  success-300: #ACDB79,
  success-400: #83CB3C,
  success-500: #639F2A,
  success-600: #4B7A21,
  success-700: #3A621A,
  success-800: #2F5015,
  success-900: #264212,

  warning-25: #FFFCF5,
  warning-50: #FFFAEB,
  warning-100: #FEF0C7,
  warning-200: #FEDF89,
  warning-300: #FEC84B,
  warning-400: #FDB422,
  warning-500: #F7A009,
  warning-600: #DC8503,
  warning-700: #B56A08,
  warning-800: #93500D,
  warning-900: #753E0D,

  danger-25: #FFFBFA,
  danger-50: #FEF3F2,
  danger-100: #FEE4E2,
  danger-200: #FECCCA,
  danger-300: #FD9B9B,
  danger-400: #F96966,
  danger-500: #F04438,
  danger-600: #D92027,
  danger-700: #B42318,
  danger-800: #911824,
  danger-900: #7A1A27,

  error-25: #FFFBFA,
  error-50: #FEF3F2,
  error-100: #FEE4E2,
  error-200: #FECCCA,
  error-300: #FD9B9B,
  error-400: #F96966,
  error-500: #F04438,
  error-600: #D92027,
  error-700: #B42318,
  error-800: #911824,
  error-900: #7A1A27,
);

:export {
  @each $key, $value in $colors { #{str-replace($key, "-", "")}: #{$value}; }
}

导入

_variables.scss

中未修改的变量并映射它们并导出每个变量。

_variables.scss：

@import 'colors.module.scss';

:root {
  @each $name, $value in $colors {
    --#{$name}: #{$value};
  }
}

在JS中使用变量：

文件.js：

import colors from "src/styles/config/colors.module.scss";

console.log(colors.gray25) 
//#FCFCFD

使用SCSS中的变量：

style.module.scss：

.selector {
    background-color: var(--gray-25);
}