Have any of you been able to override the breakpoints from the grid scss files?

[victorwhy]

We want to bring in the grid component into our component library, but having some issues trying to override the default breakpoints map. something like this in my mind should work, in generating a new set of classes but it doesn't, anyone else have any ideas?

@use '/node_modules/@carbon/grid/scss/config' with (
  $grid-breakpoints: (
    sm: (
      columns: 4,
      margin: 0,
      width: to-rem(320px),
    ),
    md: (
      columns: 8,
      margin: to-rem(16px),
      width: to-rem(768px),
    ),
    lg: (
      columns: 16,
      margin: to-rem(16px),
      width: to-rem(1024px),
    ),
    xlg: (
      columns: 16,
      margin: to-rem(16px),
      width: to-rem(1280px),
    ),
    max: (
      columns: 16,
      margin: to-rem(24px),
      width: to-rem(1440px),
    ),
  )
);
@import '/node_modules/@carbon/grid/scss/breakpoint';
@import '/node_modules/@carbon/grid/scss/css-grid';

i would loathe to copy pasta the files into our app

[victorwhy]

FYI this was a problem of grabbing the right files. ended up importing the three files this way:

@use '../../../node_modules/@carbon/styles/scss/_config' with (
  $grid-breakpoints: (
     ...
  )
);
@use '../../../node_modules/@carbon/styles/scss/_breakpoint';
@use '../../../node_modules/@carbon/styles/scss/grid/css-grid';

and everything flowed through!