在Angular组件样式中使用外部Mixins

编程问答 2022-06-12

问题描述

我在Angular组件样式表中使用SCSS mixin和函数（在外部scss文件中定义）时遇到问题。

我在src / styles / themes.scss中创建了scss themes.scss文件：

$themes: ( dark: ( backgroundColor: $background-color--dark,primaryFontColor: $primary-font-color--dark,blockBgColor: $block-color--dark,sidebarBgColor: $sidebar-background-color--dark,navigationItemBg: $navigation-item-background--dark,navigationItemBgHover: $navigation-item-background-hover--dark,navigationItemBorder: $navigation-item-border--dark,headerBgColor: $header-background-color--dark ),light: ( backgroundColor: $background-color--light,primaryFontColor: $primary-font-color--light,blockBgColor: $block-color--light,sidebarBgColor: $sidebar-background-color--light,navigationItemBg: $navigation-item-background--light,navigationItemBgHover: $navigation-item-background-hover--light,navigationItemBorder: $navigation-item-border--light,headerBgColor: $header-background-color--light ),);

@mixin themed() {
    @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;
        }
    }
}

@function t($k) {
    @return map-get($theme-map,$k);
}

在此文件中，我还定义了变量，然后，如果将此文件导入全局style.scss文件，则一切正常。但是，当我尝试将此主题.scss文件导入本地组件样式并使用mixin时，它不起作用：

@import "../../../styles/themes.scss";

.header {

    @include themed() {
        background-color: t("backgroundColor");
        color: t("primaryFontColor");
    }

[...]

接下来的事情是，如果我想在组件样式中使用themes.scss中定义的变量之一，它也可以正常工作。所以看起来问题出在使用mixin或mixin本身。

您能给我一种方法来完成这项工作吗？谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularcomponentscomponentsmixinsmixinssasssassstyles