Map-get($grid-breakpoints, md) not working when building

Ionic Framework ionic-v3
1

I have a media query like so

@media (min-width: map-get($grid-breakpoints, md)) {
  background-size: 200%;
}

which works fine when using ionic serve but crashes when trying to build.

sass: src/pages/home/home.scss, line: 15
            Undefined variable: "$grid-breakpoints".

      L14:  background-size: 300%;
      L15:  @media (min-width: map-get($grid-breakpoints, md)) {
      L16:    background-size: 200%;

[01:51:37]  ionic-app-script task: "build"
[01:51:37]  Error: Failed to render sass to css
Error: Failed to render sass to css
    at BuildError.Error (native)
    at new BuildError (/Users/xxx/Development/xxx/site-front-end/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at Object.callback (/Users/xxx/Development/xxx/site-front-end/node_modules/@ionic/app-scripts/dist/sass.js:210:24)
    at options.error (/Users/xxx/Development/xxx/site-front-end/node_modules/node-sass/lib/index.js:294:32)

How else can I get the breakpoint values?

2

any solution for this?
just now i have the same issue, everything worked a few days ago.

i have tried adding

$grid-breakpoints: (
 xs: 0, // Phone (0px - 575px)
 sm: 576px, // Phablet (576px - 767px)
 md: 768px, // Tablet vertical (768px - 991px)
 lg: 992px // Tablet horizontal, Desktop (992px and above)
);

to my variables.scss folder.
if i do this then it builds, however the app is stuck at the splashscreen and gives following error:

Uncaught ReferenceError: AppRootToken is not defined
at Function.n.forRoot (main.js:193)
at main.js:107
at Object. (main.js:107)
at e (main.js:1)
at Object. (main.js:104)
at e (main.js:1)
at Object. (main.js:107)
at e (main.js:1)
at main.js:1
at main.js:1

i only have this error when making a build with --prod.
without it it works.

I have no idea why it is not finding the $grid-breakpoints, if i look in the Ionic docs it is a variable that you can overwrite so shouldn’t it be in Ionic then?

could it be that some underlaying libraries that Ionic uses (webpack, sass, uglify …) have updated and that it now breaks because of that?