Next.js Discord

Discord Forum

weird scss build error

Unanswered
Yellow and black potter wasp posted this in #help-forum
Open in Discord
Yellow and black potter waspOP
I am porting a website to NextJS, I copied all the scss, but I am getting this error that I just cannot make sense of:

20 Replies

Yellow and black potter waspOP
    @media (min-width: $breakpoint-tablet-portrait) {
      grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
    }
    @media ($screen-laptop-and-bigger) {
      grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
    }
    @media ($screen-desktop-and-bigger) {
      grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    }
gin
are u sure the var is defined
Yellow and black potter waspOP
when looking at main.scss on line 24 it shows some completely unrelated css
@ts-ignore
did you follow the official next docs on sass?
Yellow and black potter waspOP
looking into my main css, the scss file with variables doesnt seem to be included, hold on, let me back trace it
@@ts-ignore did you follow the official next docs on sass?
Yellow and black potter waspOP
I did
main.scss -> @import '00_settings/all'; -> @import 'settings.media'; -> $screen-laptop-and-bigger exists there
and the scss variable is imported before the line where it breaks at is imported in the main scss file
gin
are u importing the file where u use the variables in main.scss?
if so, try importing the variables first, and then import the file where u use it
Yellow and black potter waspOP
the variable file is imported first in the main.scss
gin
can u check if the value is defined
Yellow and black potter waspOP
how do I do that
gin
create a random class and asign it some text or idk
ur breakpoint value is a number so that will work
Yellow and black potter waspOP
it seems there are various other things broken with the scss before I can get it to compile. I'll get back to you when I get it to even compile in the first place
Yellow and black potter waspOP
background-image: url(../../svg/icons/check--orange.svg);
great... it cant import svg files now
that are in the src folder
Yellow and black potter waspOP
solved it
+ @media #{$screen-laptop-and-bigger} {
- @media ($screen-laptop-and-bigger) {
idk how the other project this was in managed to compile at all tbh