How do i fix carbon throwing undefined mixin error

Question

I want to use the dark theme g90 in Carbon design system. I can get the default white theme by importing these:

<style lang="scss" global>
  @use "@carbon/themes";
  @include themes.set(themes.$g90);

  @import 'carbon-components/scss/globals/scss/_css--reset.scss';
  @import 'carbon-components/scss/globals/scss/_css--font-face.scss';
  @import 'carbon-components/scss/globals/scss/_css--helpers.scss';
  @import 'carbon-components/scss/globals/scss/_css--body.scss';

  @import 'carbon-components/scss/globals/grid/_grid.scss';

  @import 'carbon-components/scss/components/button/button';

</style>

However, i get a error when compiling.

[!] (plugin svelte) Error: Undefined mixin.
  ╷
3 │     @include themes.set(themes.$g90);
  │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/App.svelte 3:2  root stylesheet

The only thing i have changed from the svelte/template is

  plugins: [
    svelte({
      preprocess: [
        autoPreprocess({
          postcss: true,
          scss: { includePaths: ["src", "node_modules"] },
        }),

I have tried for hours and am missing something.

score 8 · Accepted Answer · answered Apr 11 '22 at 16:05

8

Mathias!

I am using carbon myself (v11) and it looks like you are using a combination of v10 tactics and v11 tactics.

@carbon/theme won't get you anything.

It should either be, @use 'carbon-components/scss/globals/scss/themes' (v10) or @use '@carbon/styles/scss/theme';(v11)

In v11 carbon, I am importing and using like this

app.scss

@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme' with (
  $theme: themes.$g100,
);


@use '@carbon/react';

The styles are prepackaged in @carbon/react and must be added AFTER the theme.

Let me know if any of that helped?

answered Apr 11 '22 at 16:05

Chris

1,091
11
32

It did help, but i had to change a few things to get it to work in svelte. Do you know how to change colors? – Mathias Nielsen Apr 11 '22 at 21:24
Just change the $g100. You could use $g90, $g10, or $white – Chris Apr 12 '22 at 15:31
1

Bro, i love you !! it works – asi hej May 10 '22 at 14:23
1

Dude, you saved my day. I read and reread the documentation and was unable to do this. In 5 lines you helped me more than IBM, lol Thank you! – Sildeman Dourado Araújo May 27 '22 at 17:37
2

@asihej working at IBM has it's perks lol – Chris May 31 '22 at 17:00
1

Thanks for this! The examples in their official documentation were giving me compile errors, this just works. – PsylentKnight Jun 21 '23 at 15:41
@PsylentKnight for sure! – Chris Jun 27 '23 at 13:48

How do i fix carbon throwing undefined mixin error

1 Answers1