覆盖多个scss文件中的变量

Question

如果我有这样的结构：

|_styles
        |
         ___ _colors.scss
|_components
        |_input
              |_input.tsx
              |_input.scss
        |label
              |_label.tsx
              |_label.scss

如果每个组件都像这样导入scss文件：

`import＆＃39; ./ input.scss＆＃39;;

每个scss文件都是这样的：

@import '_colors.scss';

.default {
  color: $label-default-color;
}

我想将此库导出为一个包，然后能够在_colors.scss中默认变量，但是如果每个.scss文件都导入_colors.scss文件，我该怎么办呢？

有没有办法做到这一点？

Answer 1

要覆盖Sass变量，您只需设置一个新值。

<强> _color.scss：

// DEFAULT LABEL COLOR
// Note: You can use the !default flag to make sure it
// doesn't override custom colors defined in other files
$label-default-color: red !default;

<强> _label.scss：

// OVERRIDE LABEL COLOR
$label-default-color: blue;