在不同的 scss 文件中找不到 mixin

Question

我也在学习 Angular 和 scss。因此，在我的测试 Angular v.5 项目中，当前面临@mixin 的问题。请注意，default.styleExt 也设置为“scss”。如果我在同一个 *.scss 文件中使用 @mixin 和 @include，@mixin 可以正常工作。但是当我尝试在不同的 *.scss 文件中使用该 @mixin 的 @include 时。它显示错误。

例如，在我的

styles.scss

有这个mixin，

@mixin breakpoint($screen){
    @if $screen == window_xLarge { 
        @media (min-width: 1440px){ 
            @content;
        }
    }
    @else if $screen == window_large { 
        @media (min-width: 1280px){ 
            @content;
        }
    }
    @else if $screen == window_medium { 
        @media (min-width: 840px){ 
            @content;
        }
    }
    @else if $screen == window_small { 
        @media (min-width: 600px){ 
            @content;
        }
    }
    @else if $screen == window_xSmall { 
        @media (min-width: 480px){ 
            @content;
        }
    }
}

现在，例如，当我尝试在我的其他组件之一“*.scss”中使用此 @mixin 时， 在

comp01.scss

尝试添加此代码

app-comp02{
    width: 100%;
    @include breakpoint(window_small){
        width: 50%
    }
    @include breakpoint(window_medium){
        width: 50%;
    }
    @include breakpoint(window_large){
        width: 33%;
    }
    height: auto;
    margin: 0 5px;
}

显示这样的错误

Module build failed:
    @include breakpoint(window_small){
            ^
      No mixin named breakpoint

有谁知道，为什么会这样？我绝对不想将所有代码放在同一个 scss 文件中。提前致谢。

Answer 1

将你的 mixin 保存在 _helpers.scss 文件中，然后像这样将该文件包含在你不同的 scss 中

@import "/helpers";  // Path of scss 

或者您可以使用与上述相同的语法在“comp01.scss”中简单地导入“styles.scss”

Answer 2

你必须更正你的打字你有一个错误，因为你应该这样写媒体查询，这是一个good site:sassmeister来测试你的sass/scss你可以粘贴你的代码，你会查看错误

@mixin breakpoint($screen){
    @if $screen == window_xLarge { 
        @media screen and (min-width: 1440px){ 
            @content;
        }
    }
    @else if $screen == window_large { 
        @media screen and (min-width: 1280px){ 
            @content;
        }
    }
    @else if $screen == window_medium { 
        @media screen and (min-width: 840px){ 
            @content;
        }
    }
    @else if $screen == window_small { 
        @media screen and (min-width: 600px){ 
            @content;
        }
    }
    @else if $screen == window_xSmall { 
        @media screen and (min-width: 480px){ 
            @content;
        }
    }
}

app-comp02{
    width: 100%;
    @include breakpoint(window_small){
        width: 50%
    }
    @include breakpoint(window_medium){
        width: 50%;
    }
    @include breakpoint(window_large){
        width: 33%;
    }
    height: auto;
    margin: 0 5px;
}

你是这样写的

   @media (min-width: 1280px){ 
            @content;
        }