mixin is not found in different scss file - css

Question

I am learning Angular and scss as well. So in my test Angular v.5 Project currently facing problems with #mixin. Note that default.styleExt also set to 'scss'. #mixin works fine if I use #mixin and #include in the same *.scss file. But When I try to use #include of that #mixin in a different *.scss file. It shows errors.
For example, in my styles.scss has this 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;
}
}
}
Now, when I try to use this #mixin in one of my other components' '*.scss', for example,
in comp01.scss try to add this code
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;
}
It shows error like this
Module build failed:
#include breakpoint(window_small){
^
No mixin named breakpoint
Does anyone know, why this is happening? I definitely do not want to put all codes in the same scss file. Thanks in Advance.

Answer 1

Keep your mixins in a _helpers.scss file and then include that file in both your different scss like this
#import "/helpers"; // Path of scss
Or you can simply import "styles.scss" in the "comp01.scss" using the same syntax as mentioned above

Answer 2

You have to correct your typing you have an error because you should write the media query like that and this is a good site:sassmeister to test your sass/scss you can paste your code and you will see the errors
#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;
}
and you wrote it like that
#media (min-width: 1280px){
#content;
}