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.

Answer 1

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?