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

Question

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

\n

<style lang="scss" global>\n  @use "@carbon/themes";\n  @include themes.set(themes.$g90);\n\n  @import 'carbon-components/scss/globals/scss/_css--reset.scss';\n  @import 'carbon-components/scss/globals/scss/_css--font-face.scss';\n  @import 'carbon-components/scss/globals/scss/_css--helpers.scss';\n  @import 'carbon-components/scss/globals/scss/_css--body.scss';\n\n  @import 'carbon-components/scss/globals/grid/_grid.scss';\n\n  @import 'carbon-components/scss/components/button/button';\n\n</style>\n

\n

但是，我在编译时遇到错误。

\n

[!] (plugin svelte) Error: Undefined mixin.\n  \xe2\x95\xb7\n3 \xe2\x94\x82     @include themes.set(themes.$g90);\n  \xe2\x94\x82     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src/App.svelte 3:2  root stylesheet\n

\n

我唯一改变的svelte/template是

\n

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

\n

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

\n

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，必须在主题之后添加。

让我知道这是否有帮助？