How should breakpoint-specific CSS (or SCSS) be applied (sm/md/lg/xlg/max)?

[wbudd]

Toward the bottom of the page at https://carbondesignsystem.com/guidelines/2x-grid/implementation/ there is mention of being able to do something like this:

.component {
  display: inline;

  /* applies styles inside mixin on md breakpoint or below, like max-width */
  @include carbon--breakpoint-down('md') {
    display: none;
  }
}

However, no matter what syntax variation, CSS/SCSS/etc flavor, and npm package I try; SvelteKit complains about the @include part being an "Undefined mixin".

Can you please provide a self-contained example of how to make CSS work along Carbon-defined breakpoints? Preferably including which npm/etc packages are needed besides carbon-components-svelte (if any).

[theetrain]

Hello, I tried some experimentation and got a working demo here: https://stackblitz.com/edit/sveltejs-kit-template-default-inw664?file=src%2Froutes%2F%2Blayout.svelte,src%2Froutes%2F%2Bpage.svelte,src%2Fapp.scss&terminal=dev

+page.svelte

<script>
  import { Button } from 'carbon-components-svelte'
</script>

<div class="component">
  <Button>Click me</Button>
</div>

<style lang="scss">
.component {
  display: inline;

  /* applies styles inside mixin on md breakpoint or below, like max-width */
  @include carbon--breakpoint-down('md') {
    display: none;
  }
}
</style>

From what I can tell, once you have SCSS set up, mixins need to be imported on the page they're being used. Other than carbon-components-svelte I used carbon-components@10 as a devDependency to import component styles and mixins. I added SCSS support via svelte-add that conveniently provides a variables.scss file to make mixins globally available.

[wbudd]

Thank you for the self-contained Stackblitz example and explanation! Much Appreciated!

The prependData argument in the preprocess directive of svelte.config.js (as per svelte-add) seems to make the difference, but maybe there's more to this.

Seems like a lot of manual fiddling though... Is this stuff documented/referenced anywhere?

[theetrain]

Unfortunately, I had to dig through source code in order to find this setup. We are hoping to making this clearer and effortless in carbon-components-svelte v1 as we adopt Carbon v11 SCSS.