'How do i fix carbon throwing undefined mixin error

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.

csssasssvelterollupcarbon-design-system


Solution 1:[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?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chris

Related Questions