为什么 @use 和 @include 在全局 scss 文件中有效，但在组件 scss 文件中无效？

Question

上下文

我正在使用 NextJS v12.1.0、React v17.0.2 和 sass v1.49.9。

我正在尝试创建一个基于 that article 的主题切换器。我的文件夹结构是这样的：

myProject
└───src
|   └───styles
│   │   _color-themes.scss // Themes and themed() mixin + t($key) function
│   │   _colors.scss // Colors variables
│   │   globals.scss // My global app style
│   │
│   └───components
│   |   └───my-component
│   |   │   index.tsx
│   |   │   MyComponent.module.scss // My component style

我正在使用 globals.scss 中运行良好的那部分代码:

@use "src/styles/color-themes" as *;

#content {
  padding: 48px 80px;
  @include themed() {
    background-color: t($bg); // Property is applied
  }
}

但是当我在 MyComponent.module.scss 中使用它时，添加的 SCSS 属性没有应用于呈现的元素：

@use "src/styles/color-themes" as *;

$border-radius: 8px;
$shadow: rgba(0, 0, 0, 0.06) 0px 5px 15px;

.input {
  font-size: 1rem; // Applied well
  padding: 24px 74px; // Applied well
  width: 476px; // Applied well
  border: none; // Applied well
  border-radius: $border-radius; // Applied well
  box-shadow: $shadow; // Applied well
  @include themed() {
    color: t($input); // Property is never applied
  }
}

我的问题

color 属性从未应用于我的元素，即使应用了我在 themed() 之外添加的其他属性。我也尝试过使用 t($bg)，但没有应用。

这是唯一应用的属性（在 MyComponent.module.scss 中定义）：

这里是很好应用的属性（在 globals.scss 中定义）：

我已经做过研究，但在 Google 或 Whosebug 上找不到像我这样的案例，我是 SCSS 的新手，所以我可能误解了一些东西。有人知道我做错了什么吗？

Answer 1

终于在that Denis Pasin's article找到了解决方案。

所以我只需要更新创建两个 mixin： themed 组件样式 gthemed 全局样式

@mixin themed() {
    @each $theme, $map in $themes {
        :global(.theme--#{$theme}) & {
            $theme-map: () !global;
            @each $key, $submap in $map {
                $value: map-get(map-get($themes, $theme), "#{$key}");
                $theme-map: map-merge(
                    $theme-map,
                    (
                        $key: $value,
                    )
                ) !global;
            }
            @content;
            $theme-map: null !global;
        }
    }
}

@mixin gthemed() {
    @each $theme, $map in $themes {
        .theme--#{$theme} & {
            $theme-map: () !global;
            @each $key, $submap in $map {
                $value: map-get(map-get($themes, $theme), "#{$key}");
                $theme-map: map-merge(
                    $theme-map,
                    (
                        $key: $value,
                    )
                ) !global;
            }
            @content;
            $theme-map: null !global;
        }
    }
}

为什么 @use 和 @include 在全局 scss 文件中有效，但在组件 scss 文件中无效？

Why @use and @include works in global scss file but not components scss files?

sass

next.js

scss-mixins

上下文

我的问题