Question

我也在学习Angular和scss。所以我的测试Angular v.5项目目前面临@mixin的问题。请注意，default.styleExt也设置为＆＃39; scss＆＃39;。如果我在同一个* .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;
        }
    }
}

现在，当我尝试在我的其他组件中使用此@mixin时，＃p> ＆＃39; * .scss＆＃39;，例如，在

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

将你的mixins保存在_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;
        }

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

2 个答案: