如何解决Carbon Design System中使用G90深色主题时出现的未定义Mixin错误

问题根源 #

你碰到的Undefined mixin错误，核心原因是SCSS预处理器没能正确找到Carbon Themes模块里的set混合宏，大概率是@use的路径解析逻辑或者Svelte的SCSS预配置存在问题。

步骤1：确认依赖版本并更新（可选但推荐） #

先确保你安装了最新版的Carbon相关包，避免版本兼容问题：

npm install @carbon/themes carbon-components --save

步骤2：修正Svelte的SCSS预处理器配置 #

调整autoPreprocess里的SCSS配置，不仅要确保includePaths包含node_modules，还可以通过prependData全局注入主题模块，减少重复代码：

plugins: [
  svelte({
    preprocess: [
      autoPreprocess({
        postcss: true,
        scss: {
          includePaths: ["src", "node_modules"],
          // 全局注入主题模块，所有组件都能直接使用主题变量
          prependData: '@use "@carbon/themes" as themes;',
        },
      }),
    ],
  }),
]

步骤3：修正组件内的SCSS代码 #

调整全局样式的导入顺序和模块引用方式，确保主题设置在Carbon基础样式之前：

<style lang="scss" global>
// 正确导入主题模块，用as themes避免命名冲突
@use "@carbon/themes" as themes;
// 先设置G90深色主题，再导入Carbon的基础样式
@include themes.set(themes.$g90);

// 按顺序导入Carbon的全局及组件样式
@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>

额外排查方案 #

• 如果你用的是旧版Carbon，主题模块的导入方式可能不同，尝试替换为旧版语法：

@import "@carbon/themes/scss/themes";
@include themes.set($g90);

• 清理依赖缓存后重新安装，避免缓存导致的解析异常：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

内容的提问来源于stack exchange，提问作者Mathias Nielsen