sass - 覆盖多个 scss 文件中的变量

Question

如果我有这样的结构：

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

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

`导入'./input.scss';

每个scss文件都是这样的：

@import '_colors.scss';

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

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

有没有办法做到这一点？

标签： sass

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;