我如何修复碳抛出未定义的混合错误

Question

我想在Carbon设计系统中使用深色主题g90。我可以通过导入这些来获得默认的白色主题：

<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>

但是，编译时出现错误。

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

与svelte/template相比，我唯一改变的是

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

我已经尝试了几个小时，但我遗漏了一些东西。

Answer 1

马蒂亚斯！

我自己正在使用 carbon (v11)，看起来你正在使用 v10 策略和 v11 策略的组合。

@carbon/theme 不会给你任何东西。

它应该是 @use 'carbon-components/scss/globals/scss/themes' (v10) 或 @use '@carbon/styles/scss/theme';(v11)

在 v11 carbon 中，我是这样导入和使用的

app.scss

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


@use '@carbon/react';

样式已预先打包在 @carbon/react 中，必须在主题之后添加。

如果有任何帮助，请告诉我？

我如何修复碳抛出未定义的混合错误

How do i fix carbon throwing undefined mixin error

css

sass

svelte

rollup

carbon-design-system