mixin не найден в другом файле scss

Question

Я изучаю Angular и scss.Так что в моем тесте Angular v.5 Project в настоящее время возникают проблемы с @mixin.Обратите внимание, что default.styleExt также имеет значение «scss».@mixin работает нормально, если я использую @mixin и @include в одном файле * .scss.Но когда я пытаюсь использовать @include этого @mixin в другом файле * .scss.Это показывает ошибки.

Например, в моем

styles.scss

есть этот миксин,

@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 в одном из моих других компонентов ''* .scss', например, в

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

Вы должны исправить свой набранный текст, у вас есть ошибка, потому что вы должны написать медиа-запрос подобным образом, и это хороший сайт: 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;
        }

Answer 2

Сохраните свои миксины в файле _helpers.scss, а затем включите этот файл в оба ваших различных scss, как это

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

Или вы можете просто импортировать "styles.scss" в "comp01.scss"используя тот же синтаксис, что указан выше